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
Home

Once UI Handbook

Learn Once UI Core — semantics, layout, styling, and agent-friendly patterns for humans and AI.
Avatar
Published by Quasar 16d ago
TrademarkTrademark
Once UIDocumentationBlog
© Once UI. All rights reserved.
Built with Aveiro
In short
Once UI Learn teaches the mental models behind Once UI Core — layout semantics, styling tokens, and agent-friendly patterns. Start with a track below, or jump to Foundations if you're already building.

Choose your track

Once UI is an agent-first design system: semantics over raw CSS, minimal syntax, and patterns that both humans and AI can maintain. Pick the path that matches how you work.
Track
For
Start here
Human builderDesigners and indie devs learning the system/beginner-guides/what-is-once-ui.mdx
Agent operatorCursor, MCP, and codegen workflows/design-tips/harness-overview.mdx
Quick referenceAlready know the basics — need a reminder/agent-resources/column-not-flex.mdx

Recommended path

Work through these in order for the fastest ramp-up:
  • What is Once UI? — philosophy and core ideas
  • Install & config — get the package running
  • Your first page — page skeleton in 10 minutes
  • Foundations — layout, spacing, color, typography
  • Page skeleton pattern — reusable page structure

Foundations

The grammar of Once UI. Read these before diving into individual components.
Lesson
Time
Topic
Semantics over CSS5 min/agent-resources/semantics-over-css.mdx
Row, Column & Grid8 min/design-tips/layout-row-column-grid.mdx
Spacing & rhythm5 min/design-tips/spacing-and-rhythm.mdx
Color & surfaces6 min/design-tips/color-and-surfaces.mdx
Typography scale5 min/agent-resources/typography-scale.mdx

Common patterns

Reusable compositions you'll reach for on every project.
Pattern
Time
Topic
Page skeleton5 min/beginner-guides/page-skeleton.mdx
Static panel4 min/common-patterns/static-panel.mdx
Hero section6 min/common-patterns/hero-section.mdx
Form layout5 min/common-patterns/form-layout.mdx
Decoration layers6 min/common-patterns/decoration-layers.mdx
Highlighted card5 min/common-patterns/highlighted-card.mdx
Responsive stacking5 min/common-patterns/responsive-stacking.mdx
Dialog & modal5 min/common-patterns/dialog-modal.mdx
Toast & feedback4 min/common-patterns/toast-and-feedback.mdx
App shell navigation7 min/common-patterns/app-shell-navigation.mdx
Dashboard & charts8 min/common-patterns/dashboard-and-charts.mdx
Chat & messaging7 min/common-patterns/chat-and-messaging.mdx

Design tips

Quick references for tokens, icons, and agent workflows.
Lesson
Time
Topic
Icons & buttons5 min/design-tips/icons-and-buttons.mdx
Common gotchas6 min/agent-resources/common-gotchas.mdx
Match task bundles6 min/agent-resources/match-task-bundles.mdx

Go deeper

  • Full component reference: docs.once-ui.com
  • Agent harness (codegen): docs.once-ui.com/once-ui/ai-coding
  • GitHub: once-ui-system/core