REGISTRY UI / COMPONENT CATALOG

Components

Browse registry components by category, then review preview, source, and install commands.

17
Components
10
Categories
17
JSON

Primitive

1

Grouped by category with live previews inside each card.

Button Demo
Primitive
A compact action row that verifies the smallest installable registry item.
Page previewSource

Form

3

Grouped by category with live previews inside each card.

Sign in
Use your workspace email to continue.

Keep this form as source code and adapt it per project.

or

New team? Request access from your administrator.

Login Form
Form
A complete sign-in form composed from Card, Field, Input, Separator, and Button.
Page previewSource
Search workspace
Filter reusable components, documents, or operational records.
128 items
Search Toolbar
Form
A reusable search and filtering toolbar for workbench-style pages.
Page previewSource
Project settings
A form layout for product settings, account pages, and onboarding flows.
Settings Form
Form
A tabbed settings form with input, select, textarea, switch, checkbox, and radio controls.
Page previewSource

Feedback

3

Grouped by category with live previews inside each card.

No components yet
Start your registry with one reusable block.
Add a component, document the install command, and verify it with shadcn add before publishing.
Empty State
Feedback
A reusable product empty state with semantic actions and a small status badge.
Page previewSource
Notification Banner
Feedback
A compact alert banner with an inline action.
Page previewSource
Loading State
Feedback
A reusable skeleton state for table-heavy dashboard and admin views.
Page previewSource

Layout

2

Grouped by category with live previews inside each card.

Workspace

Build a reusable product surface

Use this header for dashboards, settings pages, and internal tools that need a clear title, short context, and primary action.

Page Header
Layout
A reusable page header with context, description, and primary actions.
Page previewSource
Registry UIComponent workspace
Product
CN
Chen Ning
Design systems lead
Dashboard

Reusable interface system

A full application shell with navigation, breadcrumbs, summary cards, and user controls.

Components
42

12 ready for release

Installs
1.8k

Across active projects

Coverage
96%

Preview and source checks

Release activity
Registry build completed and install verification passed.
App Shell
Layout
A sidebar application shell with navigation, breadcrumbs, actions, summary cards, and user controls.
Page previewSource

Data Display

2

Grouped by category with live previews inside each card.

Active users
24,892
+12.4%

Compared with the previous period

Metric Card
Data Display
A compact KPI card for dashboards and summary panels.
Page previewSource
Members
A compact table for admin lists, ownership reviews, and account pages.
3 selected
MemberRoleStatusPlanLast activeOpen row actions
AB
Avery Brooksavery@example.com
OwnerActivePro2m ago
MP
Mina Parkmina@example.com
DesignerInvitedTeam1h ago
NC
Noah Chennoah@example.com
EngineerActiveProYesterday
Data Table
Data Display
A compact admin table with selection, row actions, badges, avatars, and pagination.
Page previewSource

Content

2

Grouped by category with live previews inside each card.

System
Library building blocks
Use this pattern for feature summaries, capability lists, or onboarding sections.

Composable blocks

Ship source-level components that can be edited in every consuming app.

Registry output

Build installable JSON artifacts that shadcn CLI can consume by URL.

Preview first

Keep a visual workbench so humans and AI tools can inspect available UI.

Feature List
Content
A three-column feature list for product summaries and onboarding.
Page previewSource
Workflow
Publish checklist
Use this pattern for onboarding, release flow, or setup progress.
1

Design the block

Done

Compose existing primitives and keep the public props small.

2

Build registry JSON

Generate installable artifacts for every component item.

3

Verify installation

Install into a clean app before sharing the registry URL.

Steps List
Content
A structured checklist for setup, onboarding, and release flows.
Page previewSource

Actions

1

Grouped by category with live previews inside each card.

Quick actions
Group common commands in a compact panel for dashboards and admin pages.
3 actions

Keep actions close to the workflow they support.

Action Panel
Actions
A compact command panel for repeated workflow actions.
Page previewSource

Commerce

1

Grouped by category with live previews inside each card.

Team
For small product teams that need shared UI blocks.
Popular
$29per seat / month
  • Registry installs
  • Preview workspace
  • Shared component notes
Pricing Card
Commerce
A reusable plan card with feature highlights and a primary action.
Page previewSource

People

1

Grouped by category with live previews inside each card.

CN
Chen Ning
Available

Design systems lead

Owns component quality, preview coverage, and reusable product patterns.

RegistryPreviewQA
Profile Card
People
A compact profile card for teams, owners, and account surfaces.
Page previewSource

Overlay

1

Grouped by category with live previews inside each card.

Confirm Dialog
Overlay
A destructive-action confirmation dialog composed from Dialog, Button, and Badge.
Page previewSource