# Twentyfirst UI

> Two React UI kits with one component API: Halo (soft, rounded, light-first) and Pro (sharp, dense, hairline grid, dark-first). Same components, props and markup; only tokens and CSS differ, so an app can switch kits at runtime. MIT-licensed npm packages: `@twentyfirstmedia/halo`, `@twentyfirstmedia/pro`, CLI and MCP server `@twentyfirstmedia/ui`.

Every page of the docs has a Markdown twin: append `.md` to the page path (`/halo/components/Tabs/` → `/halo/components/Tabs.md`). Halo and Pro pages differ only in the package name; the links below use Halo, replace `/halo/` with `/pro/` for Pro.

Rules for code that uses the kits:

- Build UI from Twentyfirst UI components first; import them from `@twentyfirstmedia/halo` or `@twentyfirstmedia/pro`. Check names, props and examples with the `twentyfirst-ui` MCP server (`get_component`, `search_docs`) instead of guessing.
- Halo and Pro have the same components, props and markup. Never branch on the kit in code; switch looks with `data-kit` or `<UIProvider kit>`.
- No colour literals or arbitrary Tailwind values: use the shadcn-style theme variables (`var(--primary)`, `bg-card`, `text-muted-foreground`, `border-border`) so both kits, light and dark, and the app's theme keep working.
- Wrap the app once in `UIProvider` and import the kit's `styles.css` once (or `@twentyfirstmedia/ui-core/themes.css` for both kits).
- Format numbers, money, percentages and dates with `formatNumber`, `formatMoney`, `formatPercent`, `formatDate`.
- Icons: only names from `list_icons`; icon-only buttons need a `label`.
- Before finishing, run `check_usage` from the MCP server on new code.

## Docs

- [Introduction](https://ui.twentyfirst.media/halo/index.md): Halo is one of the two Twentyfirst UI kits: React components, tokens and complete screens with the same API as Pro.
- [Installation](https://ui.twentyfirst.media/halo/installation.md): Install one kit from npm, import its styles once and wrap the app in UIProvider. React 18.3 or 19; works with Next.js, Vite and any React setup.
- [CLI](https://ui.twentyfirst.media/halo/cli.md): npx @twentyfirstmedia/ui sets up a kit, copies components into your app when you want to change them and runs the MCP server for coding agents.
- [Theming and tokens](https://ui.twentyfirst.media/halo/theming.md): Theme both kits like shadcn/ui: the same variables (primary, secondary, muted, accent, destructive, border, ring, radius, charts, sidebar) restyle every component, light and dark.
- [Theme builder](https://ui.twentyfirst.media/halo/themes.md): Build a shadcn-style theme for Halo live on real components: presets, brand colours, radius and imported shadcn themes, with the CSS to copy.
- [Motion](https://ui.twentyfirst.media/halo/motion.md): Choreographed page entrances, data that draws itself, layers that animate in and out, page transitions and reveal on scroll, with one switch: off, standard or expressive.
- [Icons](https://ui.twentyfirst.media/halo/icons.md): 93 icons built into every component, plus a library of about 700 in the same style: passkeys and security, AI, social and brand logos, files, media, commerce, maps and 3D, games and more. Search them below and click one to copy its name.
- [Text and locale](https://ui.twentyfirst.media/halo/text.md): Built-in text is English by default; replace any of it with UIProvider messages, and format numbers, money and dates for any locale with UIProvider locale.
- [AI agents and MCP](https://ui.twentyfirst.media/halo/ai.md): Give Claude Code, Cursor, VS Code and other coding agents the complete kit docs, so they build with real components instead of guessing.
- [Plain HTML and other frameworks](https://ui.twentyfirst.media/halo/html.md): Every component as a custom element (<tf-button>, <tf-data-table> …) for plain HTML, Vue, Svelte, Angular, Astro and server templates. No React setup needed.
- [Status and approvals](https://ui.twentyfirst.media/halo/status-and-approvals.md): One state model and one way to ask a human, in both kits.
- [Changelog](https://ui.twentyfirst.media/halo/changelog.md): What changed in each release of the Halo and Pro kits, the shared core, the CLI and the custom elements. All five packages are versioned together.
- [All components](https://ui.twentyfirst.media/halo/components.md): every component by group, and all icon names

## Components

- [Activity Feed](https://ui.twentyfirst.media/halo/components/ActivityFeed.md): What happened and what needs you: ActivityFeed (timeline with status shapes) and DailyBriefing (the morning summary).
- [Agent Card](https://ui.twentyfirst.media/halo/components/AgentCard.md): One agent at a glance (AgentCard) and everything about it beside a chat (AgentDetails).
- [Alert](https://ui.twentyfirst.media/halo/components/Alert.md): Inline banner for a state the page is in: a warning, a failure, a note.
- [Approval Card](https://ui.twentyfirst.media/halo/components/ApprovalCard.md): The human-in-the-loop decision: what an agent wants to do, the exact payload, and the four answers A–D.
- [Approval Inbox](https://ui.twentyfirst.media/halo/components/ApprovalInbox.md): All open approvals across projects, oldest first, next to the selected ApprovalCard.
- [Area Chart](https://ui.twentyfirst.media/halo/components/AreaChart.md): Smooth stacked areas for volume over time, with a crosshair tooltip.
- [Backup List](https://ui.twentyfirst.media/halo/components/BackupList.md): Admin safety lists: BackupList (snapshots with restore) and BlockList (blocked IPs, emails, accounts).
- [Balance Card](https://ui.twentyfirst.media/halo/components/BalanceCard.md): Prepaid balances at providers and the health of the services the shop depends on: BalanceCard and ServiceMonitor.
- [Bar Chart](https://ui.twentyfirst.media/halo/components/BarChart.md): 
- [Card](https://ui.twentyfirst.media/halo/components/Card.md): 
- [Chat Launcher](https://ui.twentyfirst.media/halo/components/ChatLauncher.md): Site-wide chrome for customer-facing apps: ChatLauncher (floating assistant with page context), CookieConsent and AnnouncementBar.
- [Chat Message](https://ui.twentyfirst.media/halo/components/ChatMessage.md): One turn in a conversation with an agent: user bubble on the right, agent reply as rich text on the left.
- [Chat Workspace](https://ui.twentyfirst.media/halo/components/ChatWorkspace.md): Messenger-style workspace for agents and people: ChatWorkspace (list | thread | details), ChatList, SearchHits, ThinkingLine, FeedbackRating.
- [Combobox](https://ui.twentyfirst.media/halo/components/Combobox.md): Searchable select for long lists, single or multiple, with optional create.
- [Command Palette](https://ui.twentyfirst.media/halo/components/CommandPalette.md): 
- [Composer](https://ui.twentyfirst.media/halo/components/Composer.md): Message input for agents: grows with the text, attachments, slash commands, a model picker, and Send that turns into Stop while the agent works.
- [Config PR Summary](https://ui.twentyfirst.media/halo/components/ConfigPRSummary.md): Platform structure: ConfigPRSummary (a proposed config change in plain language) and ModuleRegistry (installed modules).
- [Confirm Dialog](https://ui.twentyfirst.media/halo/components/ConfirmDialog.md): Asks before a destructive or hard-to-undo action.
- [Connection Card](https://ui.twentyfirst.media/halo/components/ConnectionCard.md): Connected services and the live connection: ConnectionCard and ConnectionBanner.
- [Coupon Card](https://ui.twentyfirst.media/halo/components/CouponCard.md): Discount codes with their usage and what they earned.
- [Data Table](https://ui.twentyfirst.media/halo/components/DataTable.md): Table with the features list pages need: sorting, row selection with a bulk action bar, column toggles, sticky header and expandable rows.
- [Date Picker](https://ui.twentyfirst.media/halo/components/DatePicker.md): Date field that opens a month calendar in a Popover.
- [Dns Record Table](https://ui.twentyfirst.media/halo/components/DnsRecordTable.md): Domains and DNS: DnsRecordTable, DomainList (sorted by what needs attention) and MailAuthStatus (MX, SPF, DKIM, DMARC lights).
- [Drawer](https://ui.twentyfirst.media/halo/components/Drawer.md): Right-side sheet for a record's details, sliding in over the page.
- [Email Preview](https://ui.twentyfirst.media/halo/components/EmailPreview.md): How a mail will look in the inbox and when opened, on desktop and phone.
- [Event Card](https://ui.twentyfirst.media/halo/components/EventCard.md): 
- [Export Dialog](https://ui.twentyfirst.media/halo/components/ExportDialog.md): Exporting a filtered list: format, period, columns, progress and download.
- [File Drop](https://ui.twentyfirst.media/halo/components/FileDrop.md): Dashed drop zone plus an upload list.
- [Funnel](https://ui.twentyfirst.media/halo/components/Funnel.md): Horizontal funnel: each step's share of the first, plus step-to-step conversion on the right.
- [Gallery](https://ui.twentyfirst.media/halo/components/Gallery.md): Images: Gallery (photos with thumbnails and full screen), BeforeAfter (drag to compare, e.g.
- [Gauge](https://ui.twentyfirst.media/halo/components/Gauge.md): Half-ring showing one value against a maximum: a goal, a budget, a quota.
- [Heatmap](https://ui.twentyfirst.media/halo/components/Heatmap.md): Grid of cells shaded by value, for patterns across two dimensions (weekday × hour, week × day).
- [Inbox List](https://ui.twentyfirst.media/halo/components/InboxList.md): Webmail pieces: AccountSwitcher (one login, every address), InboxList (with agent state per mail), MailThread, SignatureEditor, AttachmentPreview.
- [Kanban Column](https://ui.twentyfirst.media/halo/components/KanbanColumn.md): 
- [Key Value](https://ui.twentyfirst.media/halo/components/KeyValue.md): Small building blocks for detail panels: KeyValue (label/value list), Kbd (keyboard keys), Spinner, Collapsible.
- [Ledger Table](https://ui.twentyfirst.media/halo/components/LedgerTable.md): Bookkeeping: LedgerTable (bookings with project and agent suggestions), PnLStatement and ReceiptSuggestion.
- [Line Chart](https://ui.twentyfirst.media/halo/components/LineChart.md): 
- [List Row](https://ui.twentyfirst.media/halo/components/ListRow.md): 
- [Listing Card](https://ui.twentyfirst.media/halo/components/ListingCard.md): Property listings from portals or your own stock: ListingCard (grid card or list row) and ResultsToolbar (count, selection, bulk actions, sort, view).
- [Live Feed](https://ui.twentyfirst.media/halo/components/LiveFeed.md): Real-time activity: LiveFeed (events as they happen, with pause and filters) and BarList (ranked values with inline bars, e.g.
- [Locale Field](https://ui.twentyfirst.media/halo/components/LocaleField.md): Content in several languages and switching context: LocaleField, LocaleSwitcher, WorkspaceSwitcher.
- [Log View](https://ui.twentyfirst.media/halo/components/LogView.md): Monospace output: LogView for logs with line numbers and levels, CodeViewer for JSON, YAML and code.
- [Map View](https://ui.twentyfirst.media/halo/components/MapView.md): Points on a map: price pins for listings or bubbles for where orders come from.
- [Memory Viewer](https://ui.twentyfirst.media/halo/components/MemoryViewer.md): What an agent remembers (MemoryViewer) and how its runtime settings differ from code (OverrideDiff).
- [Menu](https://ui.twentyfirst.media/halo/components/Menu.md): 
- [Mobile Tab Bar](https://ui.twentyfirst.media/halo/components/MobileTabBar.md): Phone chrome: MobileTabBar (bottom navigation) and PushNotification (how an approval arrives on the lock screen).
- [Modal](https://ui.twentyfirst.media/halo/components/Modal.md): 
- [Notification List](https://ui.twentyfirst.media/halo/components/NotificationList.md): 
- [Number Input](https://ui.twentyfirst.media/halo/components/NumberInput.md): Number entry three ways: NumberInput with − / + steppers, Slider for a value on a known scale, OtpInput for one-time codes.
- [Order Summary](https://ui.twentyfirst.media/halo/components/OrderSummary.md): Cart and checkout pieces: CartLine rows, the OrderSummary with discount code and free-shipping progress, and CheckoutSteps.
- [Order Timeline](https://ui.twentyfirst.media/halo/components/OrderTimeline.md): Five-step fulfilment progress for an order: Placed, Paid, Packed, Shipped, Delivered.
- [Org Chart](https://ui.twentyfirst.media/halo/components/OrgChart.md): The hierarchy as a chart: orchestrator, leads per team, executing agents and people.
- [Panel](https://ui.twentyfirst.media/halo/components/Panel.md): 
- [Plan Card](https://ui.twentyfirst.media/halo/components/PlanCard.md): Pricing tier for plan pages and upgrade dialogs.
- [Product Card](https://ui.twentyfirst.media/halo/components/ProductCard.md): Product tile for catalogs and grids, plus the pieces it is made of: Price, Rating, StockBadge and ProductArt.
- [Radio Group](https://ui.twentyfirst.media/halo/components/RadioGroup.md): One choice out of a few, always visible.
- [Range Slider](https://ui.twentyfirst.media/halo/components/RangeSlider.md): Form pieces added for search filters and admin settings: RangeSlider (two thumbs), StatusSelect (a status pill that opens a list), TilePicker (pick one or many visual options) and ColorField (hex input with contrast check).
- [Review Card](https://ui.twentyfirst.media/halo/components/ReviewCard.md): Moderating customer reviews before and after they go live.
- [Rich Text Editor](https://ui.twentyfirst.media/halo/components/RichTextEditor.md): Formatted text for newsletters, product descriptions, legal pages and canned replies: toolbar, placeholder fields and a character count.
- [Run History](https://ui.twentyfirst.media/halo/components/RunHistory.md): Background work: RunHistory (scraping jobs, cron, imports) and WebhookEndpoint (an outgoing or incoming hook with its deliveries).
- [Run Trace](https://ui.twentyfirst.media/halo/components/RunTrace.md): Waterfall of one agent run: every model call, tool call, search and approval, with timing bars and expandable details.
- [Search Ad Preview](https://ui.twentyfirst.media/halo/components/SearchAdPreview.md): A text ad as it appears in search results, on phone and desktop, with the length limits checked live.
- [Secret Field](https://ui.twentyfirst.media/halo/components/SecretField.md): SecretField shows a stored credential without exposing it; MoneyInput takes amounts in the locale's format with a VAT rate.
- [Settings Layout](https://ui.twentyfirst.media/halo/components/SettingsLayout.md): Standard settings page: a label column with one sentence on what it does, controls on the right, one row per topic.
- [Shortcuts Overlay](https://ui.twentyfirst.media/halo/components/ShortcutsOverlay.md): The "?" overlay listing every keyboard shortcut, grouped by area.
- [Split Pane](https://ui.twentyfirst.media/halo/components/SplitPane.md): Resizable list–detail layout.
- [Stacked Bar Chart](https://ui.twentyfirst.media/halo/components/StackedBarChart.md): Bars split into parts of a whole per period, with a hover tooltip and legend.
- [Stat Cell](https://ui.twentyfirst.media/halo/components/StatCell.md): A KPI with its comparison: label, value, ▲/▼ delta that names what it compares to, optional sparkline.
- [Stat Tile](https://ui.twentyfirst.media/halo/components/StatTile.md): 
- [Status Indicator](https://ui.twentyfirst.media/halo/components/StatusIndicator.md): State as shape and colour together, so it reads at a glance and without colour vision.
- [Table](https://ui.twentyfirst.media/halo/components/Table.md): Quiet data table: uppercase captions, hairline rows, right-aligned tabular numbers.
- [Text Field](https://ui.twentyfirst.media/halo/components/TextField.md): Text input with label, required or optional mark, hint, and inline validation (error or success).
- [Toaster](https://ui.twentyfirst.media/halo/components/Toaster.md): Short confirmation that something happened, with optional Undo.
- [Tool Call](https://ui.twentyfirst.media/halo/components/ToolCall.md): Shows what an agent did between your question and its answer.
- [Tooltip](https://ui.twentyfirst.media/halo/components/Tooltip.md): Tooltip names an icon-only control on hover or focus; Popover holds a small interactive panel anchored to a trigger.
- [Tree View](https://ui.twentyfirst.media/halo/components/TreeView.md): Hierarchies, in-place editing and object menus: TreeView, InlineEdit, ContextMenu.
- [Trigger List](https://ui.twentyfirst.media/halo/components/TriggerList.md): What starts agents and when: TriggerList and the week view ScheduleCalendar.
- [Two Factor Setup](https://ui.twentyfirst.media/halo/components/TwoFactorSetup.md): Turning on two-factor sign-in: scan, confirm with a code, save recovery codes.
- [Uptime Bar](https://ui.twentyfirst.media/halo/components/UptimeBar.md): Health at a glance: UptimeBar (a bar per day), Meter (usage against a limit), ServerCard, DeployPipeline.
- [Valuation Card](https://ui.twentyfirst.media/halo/components/ValuationCard.md): Real-estate figures: ValuationCard (estimate with range and asking price), SavedSearch (a search that runs on its own and reports new hits) and EnergyClass (the energy label scale).
- [Variant Picker](https://ui.twentyfirst.media/halo/components/VariantPicker.md): Pick a product option: colour swatches or text pills (sizes, materials).
- [Voice Mode](https://ui.twentyfirst.media/halo/components/VoiceMode.md): Talking to an agent instead of typing: same agent, same tools, same approvals, same thread.
- [Accordion](https://ui.twentyfirst.media/halo/components/Accordion.md): Stacked sections that open and close.
- [Separator](https://ui.twentyfirst.media/halo/components/Separator.md): Small layout primitives.
- [Button Group](https://ui.twentyfirst.media/halo/components/ButtonGroup.md): Attached buttons that act as one control: undo/redo, zoom, or a split button whose arrow opens a menu.
- [Scroll Area](https://ui.twentyfirst.media/halo/components/ScrollArea.md): A scrolling box with thin scrollbars in the kit's colours, vertical, horizontal or both.
- [Toggle Group](https://ui.twentyfirst.media/halo/components/ToggleGroup.md): On/off buttons.
- [Hover Card](https://ui.twentyfirst.media/halo/components/HoverCard.md): A preview card that opens when the pointer rests on a trigger (a name, a link) or when it gets keyboard focus, and closes when the pointer or focus leaves or on Escape.
- [Carousel](https://ui.twentyfirst.media/halo/components/Carousel.md): A row of slides with previous/next buttons and dots.
- [Ambient](https://ui.twentyfirst.media/halo/components/Ambient.md): A calm, living background for glass UI: soft colour fields from the kit (pastels in Halo, a faint aurora in Pro) that drift slowly, a photo or video under a scrim, or your own layer.
- [Menubar](https://ui.twentyfirst.media/halo/components/Menubar.md): A desktop-style row of menus (File, Edit, View).
- [Navigation Menu](https://ui.twentyfirst.media/halo/components/NavigationMenu.md): Site navigation for marketing pages: plain links and items that open a panel of links with icons and descriptions, optionally with a highlighted card.
- [Tabs](https://ui.twentyfirst.media/halo/components/Tabs.md): A tab bar that switches views.
- [Sidebar](https://ui.twentyfirst.media/halo/components/Sidebar.md): App navigation down the side: groups with headings, counts and badges, one level of nested pages, links, item menus and a collapsed mode with icons only.
- [User Menu](https://ui.twentyfirst.media/halo/components/UserMenu.md): The signed-in account at the foot of a sidebar: avatar, name and email, opening a menu with profile, settings and sign-out.
- [Floating Layout](https://ui.twentyfirst.media/halo/components/FloatingLayout.md): UI floating over a full-bleed background: a map, a 3D scene, a video or a photo.
- [Select Menu](https://ui.twentyfirst.media/halo/components/SelectMenu.md): A styled select: the button shows the choice, the list opens below it with groups, icons, hints and disabled options.
- [Form](https://ui.twentyfirst.media/halo/components/Form.md): Validation for native forms.
- [Sheet](https://ui.twentyfirst.media/halo/components/Sheet.md): A Drawer that slides in from any edge: side="right" (default), "left", "top" or "bottom".
- [Resizable Panels](https://ui.twentyfirst.media/halo/components/ResizablePanels.md): Two or more panes with drag handles between them, side by side or stacked; panels can nest.
- [Qr Code](https://ui.twentyfirst.media/halo/components/QrCode.md): A QR code drawn as SVG and encoded on the device, so the text (a sign-in secret, an invite link) never goes to a service.
- [Habit Tracker](https://ui.twentyfirst.media/halo/components/HabitTracker.md): Habits with their last days as a row of marks: done, missed or no entry, today's mark a toggle.
- [Mood Picker](https://ui.twentyfirst.media/halo/components/MoodPicker.md): A five-step mood scale with faces and words, as a radio group.
- [Vital Tile](https://ui.twentyfirst.media/halo/components/VitalTile.md): One health value with its healthy range: the value, a band with the normal zone and a marker, a status in words (in range, below, above) and an optional trend.
- [Activity Rings](https://ui.twentyfirst.media/halo/components/ActivityRings.md): Concentric progress rings for daily goals (move, exercise, stand, steps, water) with a legend.
- [Sleep Chart](https://ui.twentyfirst.media/halo/components/SleepChart.md): A night as sleep stages over time, one lane per stage (awake, REM, light, deep), with the time asleep and the time per stage.
- [Medication List](https://ui.twentyfirst.media/halo/components/MedicationList.md): Today's doses in order, each with its time, name, dose, a status in words and a "taken" button.
- [Journal Entry](https://ui.twentyfirst.media/halo/components/JournalEntry.md): A journal or diary entry: the date, the mood of the day, a title, the text and tags, with room for actions such as edit or share.
- [Goal Card](https://ui.twentyfirst.media/halo/components/GoalCard.md): A goal with its progress toward a target, a due date, milestones and a note.
- [Insight Card](https://ui.twentyfirst.media/halo/components/InsightCard.md): Something the assistant noticed: what, where it comes from, why it is shown and what to do.
- [Consent List](https://ui.twentyfirst.media/halo/components/ConsentList.md): What each connected source lets the assistant read or do: one card per source with its purpose, last use and a switch per scope, plus "Revoke access".
- [Budget List](https://ui.twentyfirst.media/halo/components/BudgetList.md): Spending per category against its limit: spent and limit, a bar, and what is left or over in words.
- [Subscription List](https://ui.twentyfirst.media/halo/components/SubscriptionList.md): Recurring payments with their next charge, trial and cancelled states, and what they cost together a month and a year.
- [Net Worth Card](https://ui.twentyfirst.media/halo/components/NetWorthCard.md): What you own minus what you owe: the total, its change and trend, and the assets and liabilities behind it.
- [Deadline List](https://ui.twentyfirst.media/halo/components/DeadlineList.md): Bills, renewals, notice periods and expiring documents in date order, each with "Today", "In 12 days" or "Overdue by 3 days" in words.
- [Policy Card](https://ui.twentyfirst.media/halo/components/PolicyCard.md): One insurance policy: type and insurer, sum insured, premium, deductible, policy number, renewal date and status (active, pending, expiring, lapsed), with room for actions.
- [Coverage Matrix](https://ui.twentyfirst.media/halo/components/CoverageMatrix.md): Life risks and whether a policy covers them: covered, partly or not covered, with the policy and a note, and a count of each above the table.
- [Claim Timeline](https://ui.twentyfirst.media/halo/components/ClaimTimeline.md): An insurance claim from report to payout: steps that are done, current, still to come or failed, with dates and notes, and the amount claimed.
- [Document List](https://ui.twentyfirst.media/halo/components/DocumentList.md): Important papers (IDs, contracts, policies, certificates) with category, holder and expiry: "Expired", "Expires in 19 days" or "Valid until May 2031".

## Patterns

- [AI Chat](https://ui.twentyfirst.media/halo/patterns/AIChatScreen.md): A complete screen built from AgentMark, AgentStatus, ApprovalCard, ChatMessage and 6 more components.
- [Agent Builder](https://ui.twentyfirst.media/halo/patterns/AgentBuilderScreen.md): A complete screen built from Button, ChatMessage, Combobox, Composer and 7 more components.
- [Analytics](https://ui.twentyfirst.media/halo/patterns/AnalyticsScreen.md): A complete screen built from AppShell, BarChart, Button, CountUp and 10 more components.
- [Auth Card](https://ui.twentyfirst.media/halo/patterns/AuthCard.md): Centered card for sign-in, sign-up, password reset, two-step codes and invites.
- [Billing](https://ui.twentyfirst.media/halo/patterns/BillingScreen.md): A complete screen built from AppShell, Avatar, Badge, BarChart and 9 more components.
- [Board](https://ui.twentyfirst.media/halo/patterns/BoardScreen.md): A complete screen built from AppShell, AvatarStack, Badge, Button and 6 more components.
- [Calendar](https://ui.twentyfirst.media/halo/patterns/CalendarScreen.md): A complete screen built from AppShell, Button, EventCard, IconButton and 4 more components.
- [Customers](https://ui.twentyfirst.media/halo/patterns/CustomersScreen.md): A complete screen built from Avatar, Badge, Drawer, IconButton and 9 more components.
- [Dashboard](https://ui.twentyfirst.media/halo/patterns/Dashboard.md): A complete screen built from AppShell, Badge, Button, Card and 10 more components.
- [Files](https://ui.twentyfirst.media/halo/patterns/FilesScreen.md): A complete screen built from Chip, CommandPalette, FileCard, IconButton and 6 more components.
- [Inbox](https://ui.twentyfirst.media/halo/patterns/InboxScreen.md): A complete screen built from AppShell, Avatar, Badge, Button and 9 more components.
- [Invite Modal](https://ui.twentyfirst.media/halo/patterns/InviteModalScreen.md): A complete screen built from AppShell, Avatar, Badge, Button and 8 more components.
- [Invoice](https://ui.twentyfirst.media/halo/patterns/InvoiceScreen.md): A complete screen built from Button, IconButton, InvoicePreview, PageHeader and 5 more components.
- [Loading](https://ui.twentyfirst.media/halo/patterns/LoadingScreen.md): A complete screen built from AppShell, Badge, Button, Card and 7 more components.
- [Map](https://ui.twentyfirst.media/halo/patterns/MapScreen.md): A 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 Screens](https://ui.twentyfirst.media/halo/patterns/MobileScreens.md): A complete screen built from Avatar, Badge, Card, Chip and 7 more components.
- [People](https://ui.twentyfirst.media/halo/patterns/PeopleScreen.md): A complete screen built from AppShell, Avatar, Badge, Button and 11 more components.
- [Pricing](https://ui.twentyfirst.media/halo/patterns/PricingScreen.md): A complete screen built from PageHeader, Panel, PlanCard, Segmented and 3 more components.
- [Project](https://ui.twentyfirst.media/halo/patterns/ProjectScreen.md): A complete screen built from AppShell, Avatar, AvatarStack, Badge and 11 more components.
- [Settings](https://ui.twentyfirst.media/halo/patterns/SettingsScreen.md): A complete screen built from AppShell, Avatar, Button, IconButton and 7 more components.
- [Setup](https://ui.twentyfirst.media/halo/patterns/SetupScreen.md): A complete screen built from Button, IconButton, PageHeader, StatTile and 4 more components.
- [Shop](https://ui.twentyfirst.media/halo/patterns/ShopScreen.md): A complete screen built from Alert, Button, Funnel, PageHeader and 5 more components.
- [Sign In](https://ui.twentyfirst.media/halo/patterns/SignInScreen.md): A complete screen built from AvatarStack, Badge, Button, Checkbox and 6 more components.
- [Status](https://ui.twentyfirst.media/halo/patterns/StatusScreen.md): Full-page states for errors and interruptions: code "404", "500", "403", "maintenance", "offline", or your own title / text / icon / tint.
- [Storefront](https://ui.twentyfirst.media/halo/patterns/StorefrontScreen.md): A complete screen built from Breadcrumb, Button, IconButton, Price and 6 more components.
- [Wellbeing](https://ui.twentyfirst.media/halo/patterns/WellbeingScreen.md): A 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.
- [Workflow](https://ui.twentyfirst.media/halo/patterns/WorkflowScreen.md): A complete screen built from Badge, Button, Flow, IconButton and 6 more components.
- [Sidebar Shell](https://ui.twentyfirst.media/halo/patterns/SidebarShellScreen.md): The app shell with a labelled sidebar instead of the icon rail: AppShell navigation="sidebar".
- [Attached Sidebar](https://ui.twentyfirst.media/halo/patterns/AttachedSidebarScreen.md): A full-height app with the sidebar attached to the left edge (Sidebar variant="attached"): the calm layout for docs, settings and content tools.
- [Filter Sidebar](https://ui.twentyfirst.media/halo/patterns/FilterSidebarScreen.md): Results with their filters in a sidebar: Sidebar as="aside" turns the navigation into a complementary region for tools beside the content.
- [Health](https://ui.twentyfirst.media/halo/patterns/HealthScreen.md): A 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.
- [Habits](https://ui.twentyfirst.media/halo/patterns/HabitsScreen.md): A 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 Access](https://ui.twentyfirst.media/halo/patterns/DataAccessScreen.md): The 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.
- [Money](https://ui.twentyfirst.media/halo/patterns/MoneyScreen.md): Household 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.
- [Insurance](https://ui.twentyfirst.media/halo/patterns/InsuranceScreen.md): A household's insurance: the policies, what is and is not covered, renewals and notice periods, and the open claim beside them.
- [Life Overview](https://ui.twentyfirst.media/halo/patterns/LifeOverviewScreen.md): The 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 estate](https://ui.twentyfirst.media/halo/patterns/real-estate.md): A 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.

## Optional

- [Everything in one file](https://ui.twentyfirst.media/llms-full.txt): all guides, components with examples and props, tokens
- [Pro docs](https://ui.twentyfirst.media/pro/): the same pages in the Pro look
- [Source](https://github.com/twentyfirstmedia/ui)