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
Agent resources

Pro block registry

Install Pro blocks via shadcn CLI — @once-ui registry namespace, access tokens, and when to use vs block anchors.
Updated 19d ago
Validate generated code
Match task bundles
5 min · For agents
Use the gated registry API when the user wants Pro block source in their repo — not just a visual reference.

When to use

Goal
Use
Drop production block source into the user's projectRegistry + shadcn CLI
Study composition during codegen (no install)[Block anchors](/agent-resources/block-anchors.mdx) + [manifest.json](https://docs.once-ui.com/ai/examples/blocks/manifest.json)
Browse live previews[once-ui.com/blocks](https://once-ui.com/blocks)

Install flow

  • User creates an access token at once-ui.com/account/tokens (Pro or Indie required)
  • Add the @once-ui registry to components.json (the tokens page shows a copy-ready snippet)
  • Set REGISTRY_TOKEN in the shell and install by namespaced id
shadcn resolves namespaced registryDependencies (@once-ui/header1, etc.) through the configured registry, so composite blocks install their local deps automatically.

API reference

Fetch a block — GET https://once-ui.com/api/registry/{name}
  • Auth: Authorization: Bearer oui_… (or x-api-key header)
  • Success: shadcn registry-item JSON (registry:block)
  • 401 — missing/invalid token
  • 402 — no active Pro/Indie subscription
  • 404 — unknown block name
Manage tokens — /api/registry/token (cookie session only)
  • GET — list token metadata (never plaintext)
  • POST { "name": "…" } — create; response includes plaintext token once
  • DELETE ?id= — revoke

Codegen workflow

When a task bundle references a Pro block and the user is subscribed:
  • Load rules.compact.md + task bundle
  • Install the block via registry CLI (preferred) or read source from the blocks site
  • Adapt imports/paths to the project layout (components/once-ui/pro/)
  • Validate with pnpm validate-ai-code
If the user is not subscribed, fall back to public previews and manifest metadata — do not attempt registry calls.

Related

→ Block updates changelog → Block anchors → Harness overview → Common gotchas
export REGISTRY_TOKEN="oui_<token>"
npx shadcn@latest add @once-ui/login4