viewfinder/packages/kitchen-sink/react/src/pages/index.tsx

import type { NextPage } from 'next'
import { Layouts, Widgets } from '@tesseract-design/viewfinder-react';
import {Span} from '@tesseract-design/viewfinder-base';

const Home: NextPage = () => {
  return (
    <Layouts.Basic.Root
      topBarWidget={
        <Widgets.TopBar
          brand="Brand"
          style={{
            backgroundColor: 'inherit',
          }}
          span={Span.NARROW}
        >
          TopBar
        </Widgets.TopBar>
      }
    >
      <Layouts.Basic.ContentContainer
        span={Span.NARROW}
      >
        Hello
      </Layouts.Basic.ContentContainer>
    </Layouts.Basic.Root>
  )
}

export default Home