Skip to content

/* Without measurements, keep document navigation in normal flow so enlarged headings cannot scroll behind an estimated sticky header. */ .site-page-frame > .container-wrapper > header:has([data-docs-site-header]) { position: static !important; } @media (max-width: 63.999rem) { [data-page-frame-layout] { flex-direction: column !important; } .docs-sidebar { width: 100% !important; } .mobile-sidebar-pane { position: static !important; inset: auto !important; display: flex !important; width: 100% !important; max-height: min(60svh, 32rem); border-bottom: 1px solid var(--color-border); } .main-frame { width: 100% !important; } [data-site-contents-command] { display: none !important; } }

Shadcn Library

Overview of the Shadcn-style prototype library built on Proto UI Base.

The Shadcn library projects a familiar, crisp, and practical product interface style over Base interaction protocols. This page is a quick index: each prototype shows only its first basic demo, without API tables or code examples.

The Shadcn catalog entities currently remain in the draft lifecycle. This page reflects the current official implementation rather than a frozen stable guarantee.

16 previewable prototypes Demos load as they approach the viewport

Draft four-part passive Card with consumer-owned title and action semantics.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

Familiar button hierarchy, sizes, and states.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A pressed-state control suited to toolbars.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A single-line input preserving host-owned editing and native text selection.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A multiline editor whose editing lifecycle stays host-owned.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A tri-state tick box that also carries mixed.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

Group-owned selection, keyboard navigation, and circular feedback.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

Slim tracks and rounded thumbs driven by one host scrolling surface.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A compact boolean setting control.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

Crisp grouped navigation and content panels.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A passive rule that separates grouped content.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A modal task surface with familiar content structure.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

A familiar trigger, value display, and options panel.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

Passive atoms

Text and Surface are draft reusable presentation atoms in this workspace. They preserve the existing semantic owner and do not establish complete family or native/Compiler coverage.

Collapsible (Draft) provides Root, Trigger and Content projections over the shared Base disclosure protocol.