Blocks
Composed application blocks: app shells, auth and onboarding screens, dashboards, forms, scheduling, stat cards and wizards.
14 pages · 89 live examples, generated from the design system metadata.
All
App ShellApplication frames: a simple AppShell (rail or top bar, header, content, detail rail and status bar) and the Sidebar parts for collapsible icon rails, floating and inset sidebars, nested groups, secondary panels and right-hand inspectors.19 examplesAuthSign-in, sign-up, magic-link, passkey and single sign-on screens: AuthForm handles the fields, feedback and providers, and Screen frames it beside imagery, quotes or logos.6 examplesChatThe chat frame: a shell for a full page or a sidebar assistant that composes the Chat parts: the thread, the composer, sessions, files, the plan and activity.4 examplesDashboardFull dashboards composed from Stat Cards, Charts, DataTable and Core parts, on a grid that reflows by its own width, with a period toolbar for presets, a custom range and comparison.8 examplesFormsForm behaviour on the Core Field parts: validation with accessible errors, a summary that takes focus after a failed submit, values you edit in place and live character counts.17 examplesNavigationThe site header block: brand, primary NavigationMenu with a two-block Blog panel (categories beside recent posts) or a Categories panel on the supplied blog route, search, theme switch, and a phone sheet below lg. LayoutContainer renders it from menuProps.OnboardingFirst-run flows: workspace setup, a publication with a progress rail, a product tour in a dialog and connecting a coding agent.4 examplesProfileAccount and organisation pages for an application: profile details, organisation members and permissions, billing and usage, referrals, and connected mailboxes.5 examplesSchedulingScheduling building blocks on the Core Calendar and ToggleGroup: a calendar with per-day markers and a single-choice grid of time slots, plus time helpers.7 examplesScreensFull-screen frames for sign-in, sign-up and onboarding: the main column beside an optional aside for imagery, quotes or logos, plus header and footer bands. Profile, settings, wizard, onboarding and auth examples compose it with AuthForm, Wizard and Core parts.SettingsSettings pages: preferences in collapsible sections, notification channels, integrations with connect toggles, and developer keys and webhooks.4 examplesStat CardsMetric cards on the Core Card: a label, value and change badge with optional icon tile, actions, description, footer and a segmented meter.9 examplesWizardA guided multi-step form with validation, progress and recoverable completion.6 examples