Build
Components
Production exports rendered in their real states. Every primitive inherits the shared appearance, focus, touch, and reduced-motion contract.
Actions
The same control language covers primary, secondary, quiet, destructive, pending, and contextual actions.
No card action yet.
Fields
Labels persist, validation stays local, and the visible treatment adapts without changing semantics.
Selection and disclosure
Segmented controls change one compact value; tabs switch related panels; toggle groups alter independent presentation.
Start with the user decision this component supports.
Does it work before hydration?
The shared disclosure uses native details and summary behavior.
What happens with reduced motion?
State remains explicit while decorative transition collapses.
Where does focus go?
Dismissal restores focus to the disclosure summary.
Development
Preview
Production
Menus and modals
Overlays preserve trigger semantics, restore focus, and keep destructive actions unmistakable.
Feedback and progress
Status components make the current condition and next useful action legible without relying on color alone.
Connected
The deployment is receiving events.
Action needed
Reconnect before the credential expires.
Could not publish
Your draft is safe. Check the destination and retry.
Indexing sources68%
Loading previewLoading preview
No projects yet
Projects keep sources, collaborators, and runs together.
Content and data
Cards, tables, navigation, and identity share one restrained surface hierarchy.
Appearance
Choose how this workspace appears across sessions.
| Person | Role | Status |
|---|---|---|
| Ada Lovelace | Maintainer | Active |
| Grace Hopper | Reviewer | Invited |
| Edsger Dijkstra | Contributor | Active |
Card
Secondary
Accent
Inverse
Texture remains subordinate to content.
Conversational UI
The shared conversation primitives use the same content hierarchy, form behavior, and feedback model.
Which checks protect the appearance contract?
Source policy catches local foundation drift. Component tests protect semantics, and browser verification covers Light, Dark, System, compact layouts, focus, and reduced motion.
Application shell
The rail remains mounted while only the route body changes. The same composition collapses into a focus-trapped drawer at compact widths.
Workspace
Launch plan
The page body owns content and transition state; persistent navigation does not remount.
Ready for reviewAll required checks are represented in the shared surface language.
Component index
Every public browser component belongs to one documented family, even when its live example is the surrounding documentation application.
Coverage is structural
The outer documentation page is the live specimen for DesignThemeProvider, ThemeColorSync, DesignKitRouterProvider, AppShell, NavigationRail, AnimatedRailStage, PageCanvas, SkipLink, and ThemeToggle. Document-level route fallbacks are verified as real Next boundaries instead of being nested here, which would create invalid document and main landmarks.
Actions
ButtonIconButtonLinkButtonLinkCardIconLinkToggleButtonToolbarPressablePressableCard
Fields
TextFieldTextAreaFieldSearchFieldNumberFieldSelectFieldCheckboxFieldFileFieldFader
Selection
SegmentedControlTabsToggleGroupListBoxListBoxItemListBoxSectionDisclosureAccordion
Navigation
AppShellNavigationRailRailSectionRailItemTopBarBottomBarBreadcrumbsPagination
Overlays
TooltipMenuMenuItemMenuSectionMenuSeparatorModalDialogTrigger
Feedback
InlineAlertEmptyStateStatusDotBadgeSpinnerSkeletonProgressRouteNotFoundPageRouteErrorPageRouteLoadingPageGlobalErrorDocument
Content
CardPageIntroSettingsCardAvatarDataTableThemedSurfaceDitherSurfaceChatMessageChatComposer
Effects
ProceduralBackdropParticleHaloLiquidAuroraDotsBackgroundPhaserDots
Utilities
DesignThemeProviderThemeToggleThemeColorSyncDesignKitRouterProviderAnimatedRailStagePageCanvasKeyHintSkipLinkIconuseKeyboardShortcuts
Why no separate dark components?
Components consume semantic roles, so the same DOM and behavior work in every resolved appearance.