Once UI Handbook
Beginner Guides
What is Once UI?
Install & config
Page skeleton
Your first page
Upgrade from 1.8 to 2.0
Once UI without Next.js
Build And Launch
How to launch a portfolio site that actually gets you hired
How to build a documentation site with MDX and Next.js
How to ship a landing page and dashboard with authentication in Next.js
How to launch a social app with Next.js and Supabase
Vibe Coding
Introduction to vibe coding
Set up your local dev environment
Essential tools for vibe coding
Build your first Once UI app
Common Patterns
Hero section
Static panel
Form layout
Highlighted card
Responsive stacking
Decoration layers
Dialog & modal
Toast & feedback
Tables & lists
Loading states
App shell navigation
Dashboard & charts
Chat & messaging
Auth & verification
Settings & split panels
Data filters & toolbar
Command palette
Pricing & plans
Accordion & FAQ
Media & uploads
Empty & error states
SEO, Open Graph, and structured data
Documentation code blocks with live preview
Carousels, galleries, and before/after comparisons
Date pickers and scheduling
Context menus and dropdown actions
Tags, chips, and multi-value inputs
Roadmap & kanban
Form inputs & controls
Progress, status & badges
Scrolling & feeds
Profile, avatars & identity
Social proof & logo clouds
Masonry & media grids
Table pagination, search & bulk selection
Banners & announcements
Footer layouts
Onboarding & first run
Waitlist & coming soon
Design Tips
Color & surfaces
Harness overview
Row, Column & Grid
Spacing & rhythm
Icons & buttons
Reveal & motion
Theme tokens, FOUC-free init, and runtime style controls
Tooltips and hover cards
Border radius & nested corners
Block updates
Block updates changelog
Agent Resources
Column, not Flex
Semantics over CSS
Typography scale
Common gotchas
Block anchors
Validate generated code
Pro block registry
Match task bundles
TrademarkTrademark
Ctrl k
Search…
Sign up
Once UI Handbook
Beginner Guides
What is Once UI?
Install & config
Page skeleton
Your first page
Upgrade from 1.8 to 2.0
Once UI without Next.js
Build And Launch
How to launch a portfolio site that actually gets you hired
How to build a documentation site with MDX and Next.js
How to ship a landing page and dashboard with authentication in Next.js
How to launch a social app with Next.js and Supabase
Vibe Coding
Introduction to vibe coding
Set up your local dev environment
Essential tools for vibe coding
Build your first Once UI app
Common Patterns
Hero section
Static panel
Form layout
Highlighted card
Responsive stacking
Decoration layers
Dialog & modal
Toast & feedback
Tables & lists
Loading states
App shell navigation
Dashboard & charts
Chat & messaging
Auth & verification
Settings & split panels
Data filters & toolbar
Command palette
Pricing & plans
Accordion & FAQ
Media & uploads
Empty & error states
SEO, Open Graph, and structured data
Documentation code blocks with live preview
Carousels, galleries, and before/after comparisons
Date pickers and scheduling
Context menus and dropdown actions
Tags, chips, and multi-value inputs
Roadmap & kanban
Form inputs & controls
Progress, status & badges
Scrolling & feeds
Profile, avatars & identity
Social proof & logo clouds
Masonry & media grids
Table pagination, search & bulk selection
Banners & announcements
Footer layouts
Onboarding & first run
Waitlist & coming soon
Design Tips
Color & surfaces
Harness overview
Row, Column & Grid
Spacing & rhythm
Icons & buttons
Reveal & motion
Theme tokens, FOUC-free init, and runtime style controls
Tooltips and hover cards
Border radius & nested corners
Block updates
Block updates changelog
Agent Resources
Column, not Flex
Semantics over CSS
Typography scale
Common gotchas
Block anchors
Validate generated code
Pro block registry
Match task bundles
TrademarkTrademark
Once UIDocumentationBlog
© Once UI. All rights reserved.
Built with Aveiro

Build your first Once UI app

Create your first Once UI app.
Updated 2 months ago
Essential tools for vibe coding

Set up Once UI

We'll start with the Once UI Starter which gives us access to 100+ Once UI components and a minimalistic Next.js boilerplate. Clone the repository and set up the local environment as explained in the local environment setup guide.

Create the layout

Let's create two new components in the components folder: Header.tsx and Footer.tsx. 
<Row fillWidth position="sticky" horizontal="center" paddingX="l" paddingTop="8" zIndex={1}>
    <Row maxWidth="l" paddingLeft="16" paddingRight="8" paddingY="8" background="surface" radius="l" border="neutral-medium" horizontal="between">
      <Row gap="40" vertical="center">
        <Logo href="/" size="s" dark wordmark="/trademarks/wordmark-dark.svg" />
        <Logo href="/" size="s" light wordmark="/trademarks/wordmark-light.svg" />
        <Row gap="20" textVariant="label-default-s" xs={{hide: true}}>
          <SmartLink href="/">Home</SmartLink>
          <SmartLink href="/about">About</SmartLink>
          <SmartLink href="/contact">Contact</SmartLink>
        </Row>
      </Row>
      <Row gap="8">
        <Button size="s" href="/signup" variant="secondary">Sign up</Button>
        <Button size="s" href="/login">Login</Button>
      </Row>
    </Row>
</Row>
The position="sticky" prop makes the header sticky, so it stays at the top of the page when scrolling. The light and dark props are used to conditionally render the logo based on the current theme. Don't forget to change the svg files to your own logo. The xs={{hide: true}} prop hides the navigation links on mobile. 
<Row fillWidth horizontal="center" paddingX="l" background="surface" borderTop="neutral-medium">
    <Column maxWidth="l" padding="l" gap="32">
      <Logo href="/" dark icon="/trademarks/icon-dark.svg" size="s" />
      <Logo href="/" light icon="/trademarks/icon-light.svg" size="s" />
      <Row fillWidth horizontal="between" textVariant="label-default-s">
        <Column fillWidth gap="16">
          <Text variant="label-default-s" marginBottom="16">Product</Text>
          <SmartLink href="/">Home</SmartLink>
          <SmartLink href="/about">About</SmartLink>
          <SmartLink href="/contact">Contact</SmartLink>
        </Column>
        <Column fillWidth gap="16">
          <Text variant="label-default-s" marginBottom="16">Legal</Text>
          <SmartLink href="/privacy-policy">Privacy Policy</SmartLink>
          <SmartLink href="/terms-of-service">Terms of Service</SmartLink>
        </Column>
      </Row>
      <Text variant="label-default-s" paddingY="16" onBackground="neutral-weak">{new Date().getFullYear()} Once UI. All rights reserved.</Text>
    </Column>
</Row>
Now let's open the layout.tsx file and add the Header and Footer components to the layout. They will appear on every page.