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
Block updates

Block updates changelog

Every Once UI Pro block release, newest first — one running changelog instead of a page per batch.
Updated 19d ago

For agents

Link a specific example instead of loading a full category page: Install into a repo when the user has an active Pro/Indie subscription: See Pro block registry for the full API and Block anchors for the anchor workflow. Cross-reference blocks against examples/blocks/manifest.json and a task bundle from tasks/index.json.
Mar 15, 2025

Initial Release

2026-07-27 — Hero, about & commerce blocks (PR #67)

Four new Pro blocks: Hero14 (homepage-style hero with CompareImage slider, version badge, and TiltFx preview card), About7 (Frontier benefits section with sticky CTA sidebar), Productivity3 (weekly planner with color-coded time blocks), Checkout2 (multi-step checkout with sticky order summary).

2026-07-26 — Auth, media & features blocks (PR #63)

Four new Pro blocks: Streaming3 (podcast browse page with sticky mini player), FAQ7 (sticky support card with team avatars), Login5 (magic link + passkey auth with OTP flow), Features18 (interactive capability grid with MatrixFx and LineChart tiles).

2026-07-25 — Pricing, dashboard & hero blocks (PR #62)

https://once-ui.com/blocks/{category}#{BlockId}
export REGISTRY_TOKEN="oui_<token>"
npx shadcn@latest add @once-ui/{block-id}
Four new Pro blocks: Background7 (atmospheric hero shell with smoke video overlay), Pricing4 (SaaS comparison table with sticky tier headers), Dashboard3 (live StylePanel theming preview), Testimonial10 (expandable case-study slideshow).

2026-07-24 — App chrome & growth blocks (PR #61)

Four new Pro blocks: Footer6 (logo-wall social proof footer), Sidebar9 (dual-panel icon-rail navigation), Cookie4 (gradient-card consent), Waitlist3 (gamified waitlist with referral leaderboard).
A follow-up audit restored Waitlist2, Cookie3, Footer5, and Sidebar8 metadata entries that this PR had accidentally replaced.

2026-07-23 — Landing & layout blocks (PR #59)

Four new Pro blocks filling categories with no prior July refresh: About6 (contributors hall of fame), Careers4 (culture-first hiring page), Blog4 (editorial layout with changelog/roadmap promo cards), Header6 (marketing header with announcement strip).

2026-07-21 to 2026-07-22 — Sections, pricing & growth blocks (PR #57)

Eight new Pro blocks across two merge batches: Testimonial9, Plans7, Bento4, and FAQ6 on 07-21; Newsletter6, Pricing3, Contact4, and FundingGauge1 on 07-22.
Follow-up preview polish: redundant background="page" wrappers removed from Bento, FAQ, Features, Hero, Newsletter, Testimonial, and Widgets demos, placeholder icons replaced with registered Once UI icons, and the Achievements widget's gauge hue and lock icon were corrected.

2026-07-20 — Creator, content & hero blocks (PR #49)

Four new Pro blocks: Hero13 (split hero with gradient CTA and framed preview), Blog3 (editorial layout with topic sidebar and newsletter card), Profile2 (creator profile with stats and highlight scroller), Features17 (theming showcase with live StylePanel preview).

2026-07-19 — Product, social & settings blocks (PR #48)

Four new Pro blocks: Store2 (product detail page with gallery and variant selectors), Feed4 (social timeline with carousel and link previews), Role3 (job detail with sticky team sidebar and interview timeline), Settings3 (account settings with billing history).

2026-07-18 — Blocks docs platform rewrite (PR #34 / #41)

The once-ui.com/blocks catalog moved to a data-driven BlockPage architecture — manifest-joined metadata instead of fragile array-index pairing, with roughly 2,900 lines removed across 26 category pages. Shipped alongside: per-example anchors (/blocks/hero#Hero12), a right-rail table of contents using Once UI's native HeadingNav, content-sized lazy-mounted previews, and Pro-gated source tabs. Also fixed the Contact1/Contact2 title-preview mismatch and deduplicated the NEW-badge recency logic.

2026-07-18 — Pro block registry & CLI install (PR #44 / #46, install bar PR #55)

Pro blocks became installable straight into a project via the shadcn CLI — a build-time registry generator emits one shadcn-compatible JSON item per block, served through a subscription-gated API. PR #46 namespaced registryDependencies (@once-ui/x) so composite blocks resolve sibling dependencies correctly. PR #55 added a copy-ready install-command bar above every block preview, gated to Pro/Indie subscribers. See Pro block registry for the full setup.

2026-07-18 — Community & workspace blocks (PR #36)

Four new Pro blocks: About5 (community stats with partner logos), Dashboard2 (workspace pulse dashboard), Footer5 (newsletter-first footer), Productivity2 (pomodoro focus mode layout).

2026-07-17 — July 2026 Pro blocks (PR #34)

The batch that kicked off this changelog: twelve new Pro blocks spanning marketing & content (Hero12, Blog2, Newsletter5, FAQ5, Waitlist2), app chrome (Header5, Sidebar8, Cookie3), and product flows (Login4, Contact3, Careers3, Streaming2).

Related

→ Pro block registry & CLI install → Block anchors → Harness overview