Once UI Handbook
Beginner Guides
What is Once UI?
Install & config
Page skeleton
Your first page
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
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
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
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
Common patterns

Footer layouts

Minimal bars, CTA closers, and multi-column sitemap grids — Footer1–4 Pro block patterns.
Updated 19d ago
Banners & announcements
Onboarding & first run
6 min · Pattern
Footers anchor marketing pages with sitemap grids, trust rows, and closing CTAs. Compose them with Column, Grid, SmartLink, and Logo — match Footer1–4 Pro blocks for production structure.

What this pattern covers

Once UI footers range from minimal bars to multi-column sitemaps:
  • Footer1 — compact icon + copyright row
  • Footer2 — centered CTA above links
  • Footer3 — five-column responsive sitemap grid
  • Footer4 — premium footer with ambient effects (describe TypeFx and Particle in prose)
Gold references: packages/core/ai/examples/blocks/manifest.json (Footer1–4), packages/core/ai/examples/blocks/Footer3.tsx.

Minimal footer bar

Footer1 pattern: one Row with social IconButtons and muted copyright Text. Use horizontal="between" so copyright and icons pin to opposite edges. Icon names must come from the Once UI icon spec — never invent names.

CTA footer

Footer2 adds a closing headline and Button above the link row — common on landing pages after the final feature section: Describe in prose: replace plain Text link labels with SmartLink when routes are known.

Multi-column sitemap

Footer3 uses Grid with responsive column collapse: 
<Row fillWidth horizontal="between" vertical="center" paddingY="24" paddingX="l">
  <Text variant="label-default-s" onBackground="neutral-weak">
    © 2026 Once UI
  </Text>
  <Row gap="8">
    <IconButton icon="github" variant="ghost" size="s" />
    <IconButton icon="discord" variant="ghost" size="s" />
  </Row>
</Row>
<Column fillWidth horizontal="center" paddingTop="80" paddingBottom="24" gap="48">
  <Column gap="24" horizontal="center" maxWidth="s">
    <Heading variant="display-strong-xs" align="center">
      Ready to ship?
    </Heading>
    <Text variant="body-default-m" onBackground="neutral-weak" align="center">
      Install the package and scaffold your first page in minutes.
    </Text>
    <Button arrowIcon>Get started</Button>
  </Column>
  <Row fillWidth horizontal="between" paddingX="l">
    <Text variant="label-default-s" onBackground="neutral-weak">
      © 2026 Once UI
    </Text>
    <Row gap="16">
      <Text variant="label-default-s" onBackground="neutral-weak">Docs</Text>
      <Text variant="label-default-s" onBackground="neutral-weak">GitHub</Text>
    </Row>
  </Row>
</Column>
<Column fillWidth horizontal="center" paddingTop="80" paddingBottom="16">
  <Column maxWidth="xl" paddingX="l" gap="48">
    <Grid fillWidth columns={5} m={{ columns: 3 }} s={{ columns: 2 }} gap="32">
      {sections.map((section) => (
        <Column key={section.title} gap="16">
          <Text variant="label-default-s">{section.title}</Text>
          <Column gap="12">
            {section.items.map((item) => (
              <Text
                key={item.label}
                variant="body-default-s"
                onBackground="neutral-weak"
              >
                {item.label}
              </Text>
            ))}
          </Column>
        </Column>
      ))}
    </Grid>
    <Row fillWidth horizontal="between" vertical="center">
      {/* Logo + social IconButtons */}
    </Row>
  </Column>
</Column>
Rules for sitemap grids:
  • Set columns={5} with m={{ columns: 3 }} and s={{ columns: 2 }} — never rely on defaults
  • Section titles use label-default-s; links use body-default-s with onBackground="neutral-weak"
  • Optional Tag on items (e.g. “New”) — pass label only, not duplicate children (see gotchas.json)

Trust row above footer

Pair Social proof & logo clouds with the footer on marketing pages:
  • Final feature or pricing section
  • Centered trust label + logo grid
  • Footer sitemap or CTA block
Keep the trust strip visually lighter than the footer — smaller text, more whitespace above the sitemap.

Premium footer effects

Footer4 combines Background, Particle, TypeFx, and Mask for animated wordmarks. These are decoration layers — follow Decoration layers:
  • Absolute Background on the footer wrapper
  • pointerEvents="none" on all effect layers
  • Content Column with zIndex={1}
Describe in prose: load Footer4 from packages/core/ai/examples/blocks/Footer4.tsx when you need particle + typewriter effects. Budget one animated footer per page, not per section.

Write this / not this

✅ Once UI way
❌ Common mistake
Grid with breakpoint column overridesSingle-column stack of 20 links
`paddingTop="80"` section rhythmFooter glued to last section with no gap
SmartLink for internal routesRaw anchor tags with custom styles
Muted `neutral-weak` link textLinks same weight as section titles

Check yourself

  • Sitemap Grid sets columns at s / m breakpoints
  • CTA footer has one primary Button, not three competing actions
  • Copyright and legal links are present on marketing pages
  • Decoration effects use absolute layers with pointerEvents="none"

Related

→ Social proof & logo clouds → Hero section → Decoration layers → Pro blocks: packages/core/ai/examples/blocks/Footer1.tsx – Footer4.tsx