Patterns
37 complete screens built only from kit components: dashboards, chat, agents, commerce, admin and real estate. Each comes with its full code.
AI ChatA complete screen built from AgentMark, AgentStatus, ApprovalCard, ChatMessage and 6 more components.Agent BuilderA complete screen built from Button, ChatMessage, Combobox, Composer and 7 more components.AnalyticsA complete screen built from AppShell, BarChart, Button, CountUp and 10 more components.Auth CardCentered card for sign-in, sign-up, password reset, two-step codes and invites.BillingA complete screen built from AppShell, Avatar, Badge, BarChart and 9 more components.BoardA complete screen built from AppShell, AvatarStack, Badge, Button and 6 more components.CalendarA complete screen built from AppShell, Button, EventCard, IconButton and 4 more components.CustomersA complete screen built from Avatar, Badge, Drawer, IconButton and 9 more components.DashboardA complete screen built from AppShell, Badge, Button, Card and 10 more components.FilesA complete screen built from Chip, CommandPalette, FileCard, IconButton and 6 more components.InboxA complete screen built from AppShell, Avatar, Badge, Button and 9 more components.Invite ModalA complete screen built from AppShell, Avatar, Badge, Button and 8 more components.InvoiceA complete screen built from Button, IconButton, InvoicePreview, PageHeader and 5 more components.LoadingA complete screen built from AppShell, Badge, Button, Card and 7 more components.MapA city map with glass controls floating over it: search and filters on top, map layers on the start side, the selected place with directions on the end side, zoom buttons and a dock.Mobile ScreensA complete screen built from Avatar, Badge, Card, Chip and 7 more components.PeopleA complete screen built from AppShell, Avatar, Badge, Button and 11 more components.PricingA complete screen built from PageHeader, Panel, PlanCard, Segmented and 3 more components.ProjectA complete screen built from AppShell, Avatar, AvatarStack, Badge and 11 more components.SettingsA complete screen built from AppShell, Avatar, Button, IconButton and 7 more components.SetupA complete screen built from Button, IconButton, PageHeader, StatTile and 4 more components.ShopA complete screen built from Alert, Button, Funnel, PageHeader and 5 more components.Sign InA complete screen built from AvatarStack, Badge, Button, Checkbox and 6 more components.StatusFull-page states for errors and interruptions: code "404", "500", "403", "maintenance", "offline", or your own title / text / icon / tint.StorefrontA complete screen built from Breadcrumb, Button, IconButton, Price and 6 more components.WellbeingA wellbeing dashboard in glass: sleep, streak and steps as tinted glass tiles, last nights' sleep, today's goal, mindful minutes, mood and habits, and a journal prompt, over the kit's ambient colours.WorkflowA complete screen built from Badge, Button, Flow, IconButton and 6 more components.Sidebar ShellThe app shell with a labelled sidebar instead of the icon rail: AppShell navigation="sidebar".Attached SidebarA full-height app with the sidebar attached to the left edge (Sidebar variant="attached"): the calm layout for docs, settings and content tools.Filter SidebarResults with their filters in a sidebar: Sidebar as="aside" turns the navigation into a complementary region for tools beside the content.HealthA personal health page in the app shell with a sidebar: vitals with healthy ranges, an insight with its reason, activity rings, last night's sleep and today's medication.HabitsA daily check-in: the mood scale and a line for the journal, the week's habits, the latest entry and longer goals beside it.Data AccessThe privacy page of an AI-first app: per source, what the assistant may read and do, an insight that suggests revoking unused access, and a summary of what it did this month.MoneyHousehold money in the app shell with a sidebar: net worth with its trend, an insight about a duplicate subscription, the month's budgets and the subscriptions beside them.InsuranceA household's insurance: the policies, what is and is not covered, renewals and notice periods, and the open claim beside them.Life OverviewThe start page of an AI-first life app: what needs you today across health, money and papers, as insights with their reasons, the next deadlines, budgets, mood and activity.Real estateA listing search page: results toolbar with bulk actions, listings as cards or rows, a map with price pins, valuation, energy class and the photo gallery.