# All components > 119 component pages and 37 patterns of the Pro kit. Every page has a live example, its code and the props. ## AI - [Activity Feed](https://ui.twentyfirst.media/pro/components/ActivityFeed.md): What happened and what needs you: ActivityFeed (timeline with status shapes) and DailyBriefing (the morning summary). (ActivityFeed, DailyBriefing) - [Agent Card](https://ui.twentyfirst.media/pro/components/AgentCard.md): One agent at a glance (AgentCard) and everything about it beside a chat (AgentDetails). (AgentCard, AgentDetails, Button) - [Approval Card](https://ui.twentyfirst.media/pro/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/pro/components/ApprovalInbox.md): All open approvals across projects, oldest first, next to the selected ApprovalCard. - [Chat Message](https://ui.twentyfirst.media/pro/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/pro/components/ChatWorkspace.md): Messenger-style workspace for agents and people: ChatWorkspace (list | thread | details), ChatList, SearchHits, ThinkingLine, FeedbackRating. (ChatList, ChatMessage, ChatWorkspace, FeedbackRating, SearchHits, ThinkingLine) - [Composer](https://ui.twentyfirst.media/pro/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. (AgentStatus, Composer, PromptStarters, UsageMeter) - [Config PR Summary](https://ui.twentyfirst.media/pro/components/ConfigPRSummary.md): Platform structure: ConfigPRSummary (a proposed config change in plain language) and ModuleRegistry (installed modules). (Button, ConfigPRSummary, ModuleRegistry) - [Memory Viewer](https://ui.twentyfirst.media/pro/components/MemoryViewer.md): What an agent remembers (MemoryViewer) and how its runtime settings differ from code (OverrideDiff). (MemoryViewer, OverrideDiff) - [Org Chart](https://ui.twentyfirst.media/pro/components/OrgChart.md): The hierarchy as a chart: orchestrator, leads per team, executing agents and people. - [Run Trace](https://ui.twentyfirst.media/pro/components/RunTrace.md): Waterfall of one agent run: every model call, tool call, search and approval, with timing bars and expandable details. - [Tool Call](https://ui.twentyfirst.media/pro/components/ToolCall.md): Shows what an agent did between your question and its answer. (Reasoning, ToolCall) - [Trigger List](https://ui.twentyfirst.media/pro/components/TriggerList.md): What starts agents and when: TriggerList and the week view ScheduleCalendar. (ScheduleCalendar, TriggerList) - [Voice Mode](https://ui.twentyfirst.media/pro/components/VoiceMode.md): Talking to an agent instead of typing: same agent, same tools, same approvals, same thread. (Segmented, VoiceMode) ## Overlays - [Alert](https://ui.twentyfirst.media/pro/components/Alert.md): Inline banner for a state the page is in: a warning, a failure, a note. (Alert, Button) - [Chat Launcher](https://ui.twentyfirst.media/pro/components/ChatLauncher.md): Site-wide chrome for customer-facing apps: ChatLauncher (floating assistant with page context), CookieConsent and AnnouncementBar. (AnnouncementBar, ChatLauncher, ChatMessage, Composer, CookieConsent, PromptStarters) - [Command Palette](https://ui.twentyfirst.media/pro/components/CommandPalette.md): - [Confirm Dialog](https://ui.twentyfirst.media/pro/components/ConfirmDialog.md): Asks before a destructive or hard-to-undo action. - [Drawer](https://ui.twentyfirst.media/pro/components/Drawer.md): Right-side sheet for a record's details, sliding in over the page. (Badge, Drawer, StatTile, Tabs) - [Export Dialog](https://ui.twentyfirst.media/pro/components/ExportDialog.md): Exporting a filtered list: format, period, columns, progress and download. - [Menu](https://ui.twentyfirst.media/pro/components/Menu.md): - [Mobile Tab Bar](https://ui.twentyfirst.media/pro/components/MobileTabBar.md): Phone chrome: MobileTabBar (bottom navigation) and PushNotification (how an approval arrives on the lock screen). (MobileTabBar, PushNotification) - [Modal](https://ui.twentyfirst.media/pro/components/Modal.md): (Button, Input, Modal) - [Notification List](https://ui.twentyfirst.media/pro/components/NotificationList.md): - [Shortcuts Overlay](https://ui.twentyfirst.media/pro/components/ShortcutsOverlay.md): The "?" overlay listing every keyboard shortcut, grouped by area. (Button, ShortcutsOverlay) - [Toaster](https://ui.twentyfirst.media/pro/components/Toaster.md): Short confirmation that something happened, with optional Undo. (Button, Toaster) - [Tooltip](https://ui.twentyfirst.media/pro/components/Tooltip.md): Tooltip names an icon-only control on hover or focus; Popover holds a small interactive panel anchored to a trigger. (Button, Combobox, Icon, Popover, Tooltip) - [Hover Card](https://ui.twentyfirst.media/pro/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. (HoverCard, Avatar, Badge) - [Sheet](https://ui.twentyfirst.media/pro/components/Sheet.md): A Drawer that slides in from any edge: side="right" (default), "left", "top" or "bottom". (Drawer, SelectMenu, Button) ## Charts - [Area Chart](https://ui.twentyfirst.media/pro/components/AreaChart.md): Smooth stacked areas for volume over time, with a crosshair tooltip. - [Bar Chart](https://ui.twentyfirst.media/pro/components/BarChart.md): - [Funnel](https://ui.twentyfirst.media/pro/components/Funnel.md): Horizontal funnel: each step's share of the first, plus step-to-step conversion on the right. - [Gauge](https://ui.twentyfirst.media/pro/components/Gauge.md): Half-ring showing one value against a maximum: a goal, a budget, a quota. - [Heatmap](https://ui.twentyfirst.media/pro/components/Heatmap.md): Grid of cells shaded by value, for patterns across two dimensions (weekday × hour, week × day). - [Line Chart](https://ui.twentyfirst.media/pro/components/LineChart.md): - [Stacked Bar Chart](https://ui.twentyfirst.media/pro/components/StackedBarChart.md): Bars split into parts of a whole per period, with a hover tooltip and legend. ## Admin - [Backup List](https://ui.twentyfirst.media/pro/components/BackupList.md): Admin safety lists: BackupList (snapshots with restore) and BlockList (blocked IPs, emails, accounts). (BackupList, BlockList) - [Balance Card](https://ui.twentyfirst.media/pro/components/BalanceCard.md): Prepaid balances at providers and the health of the services the shop depends on: BalanceCard and ServiceMonitor. (BalanceCard, ServiceMonitor) - [Email Preview](https://ui.twentyfirst.media/pro/components/EmailPreview.md): How a mail will look in the inbox and when opened, on desktop and phone. - [Run History](https://ui.twentyfirst.media/pro/components/RunHistory.md): Background work: RunHistory (scraping jobs, cron, imports) and WebhookEndpoint (an outgoing or incoming hook with its deliveries). (LogView, RunHistory, WebhookEndpoint) - [Search Ad Preview](https://ui.twentyfirst.media/pro/components/SearchAdPreview.md): A text ad as it appears in search results, on phone and desktop, with the length limits checked live. (SearchAdPreview, TextField) - [Qr Code](https://ui.twentyfirst.media/pro/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. (QrCode, Card) ## Data - [Card](https://ui.twentyfirst.media/pro/components/Card.md): (Badge, Button, Card, IconButton, Stagger, TintIcon) - [Connection Card](https://ui.twentyfirst.media/pro/components/ConnectionCard.md): Connected services and the live connection: ConnectionCard and ConnectionBanner. (Button, ConnectionBanner, ConnectionCard) - [Data Table](https://ui.twentyfirst.media/pro/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. (Avatar, Badge, DataTable, FilterBar) - [Dns Record Table](https://ui.twentyfirst.media/pro/components/DnsRecordTable.md): Domains and DNS: DnsRecordTable, DomainList (sorted by what needs attention) and MailAuthStatus (MX, SPF, DKIM, DMARC lights). (DnsRecordTable, DomainList, MailAuthStatus) - [Event Card](https://ui.twentyfirst.media/pro/components/EventCard.md): - [Inbox List](https://ui.twentyfirst.media/pro/components/InboxList.md): Webmail pieces: AccountSwitcher (one login, every address), InboxList (with agent state per mail), MailThread, SignatureEditor, AttachmentPreview. (AccountSwitcher, InboxList, MailThread) - [Kanban Column](https://ui.twentyfirst.media/pro/components/KanbanColumn.md): (AvatarStack, Badge, Card, KanbanColumn) - [Ledger Table](https://ui.twentyfirst.media/pro/components/LedgerTable.md): Bookkeeping: LedgerTable (bookings with project and agent suggestions), PnLStatement and ReceiptSuggestion. (LedgerTable, PnLStatement, ReceiptSuggestion) - [List Row](https://ui.twentyfirst.media/pro/components/ListRow.md): - [Live Feed](https://ui.twentyfirst.media/pro/components/LiveFeed.md): Real-time activity: LiveFeed (events as they happen, with pause and filters) and BarList (ranked values with inline bars, e.g. (BarList, LiveFeed) - [Map View](https://ui.twentyfirst.media/pro/components/MapView.md): Points on a map: price pins for listings or bubbles for where orders come from. (IconButton, MapView) - [Panel](https://ui.twentyfirst.media/pro/components/Panel.md): (EventCard, IconButton, Panel, Tabs) - [Stat Cell](https://ui.twentyfirst.media/pro/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/pro/components/StatTile.md): (Stagger, StatTile) - [Table](https://ui.twentyfirst.media/pro/components/Table.md): Quiet data table: uppercase captions, hairline rows, right-aligned tabular numbers. (Avatar, Badge, Table) - [Uptime Bar](https://ui.twentyfirst.media/pro/components/UptimeBar.md): Health at a glance: UptimeBar (a bar per day), Meter (usage against a limit), ServerCard, DeployPipeline. (DeployPipeline, Meter, ServerCard, UptimeBar) ## Forms - [Combobox](https://ui.twentyfirst.media/pro/components/Combobox.md): Searchable select for long lists, single or multiple, with optional create. (Combobox, TagInput) - [Date Picker](https://ui.twentyfirst.media/pro/components/DatePicker.md): Date field that opens a month calendar in a Popover. (Calendar, DatePicker) - [File Drop](https://ui.twentyfirst.media/pro/components/FileDrop.md): Dashed drop zone plus an upload list. - [Locale Field](https://ui.twentyfirst.media/pro/components/LocaleField.md): Content in several languages and switching context: LocaleField, LocaleSwitcher, WorkspaceSwitcher. (LocaleField, LocaleSwitcher, WorkspaceSwitcher) - [Number Input](https://ui.twentyfirst.media/pro/components/NumberInput.md): Number entry three ways: NumberInput with − / + steppers, Slider for a value on a known scale, OtpInput for one-time codes. (NumberInput, OtpInput, Slider) - [Radio Group](https://ui.twentyfirst.media/pro/components/RadioGroup.md): One choice out of a few, always visible. (RadioGroup, Segmented) - [Range Slider](https://ui.twentyfirst.media/pro/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). (ColorField, RangeSlider, StatusSelect, TilePicker) - [Rich Text Editor](https://ui.twentyfirst.media/pro/components/RichTextEditor.md): Formatted text for newsletters, product descriptions, legal pages and canned replies: toolbar, placeholder fields and a character count. - [Secret Field](https://ui.twentyfirst.media/pro/components/SecretField.md): SecretField shows a stored credential without exposing it; MoneyInput takes amounts in the locale's format with a VAT rate. (MoneyInput, SecretField) - [Text Field](https://ui.twentyfirst.media/pro/components/TextField.md): Text input with label, required or optional mark, hint, and inline validation (error or success). - [Two Factor Setup](https://ui.twentyfirst.media/pro/components/TwoFactorSetup.md): Turning on two-factor sign-in: scan, confirm with a code, save recovery codes. - [Toggle Group](https://ui.twentyfirst.media/pro/components/ToggleGroup.md): On/off buttons. (ToggleGroup, Toggle) - [Select Menu](https://ui.twentyfirst.media/pro/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/pro/components/Form.md): Validation for native forms. (Form, TextField, SelectMenu, Textarea, Checkbox, Button) ## Commerce - [Coupon Card](https://ui.twentyfirst.media/pro/components/CouponCard.md): Discount codes with their usage and what they earned. - [Order Summary](https://ui.twentyfirst.media/pro/components/OrderSummary.md): Cart and checkout pieces: CartLine rows, the OrderSummary with discount code and free-shipping progress, and CheckoutSteps. (Button, CartLine, CheckoutSteps, OrderSummary) - [Order Timeline](https://ui.twentyfirst.media/pro/components/OrderTimeline.md): Five-step fulfilment progress for an order: Placed, Paid, Packed, Shipped, Delivered. - [Plan Card](https://ui.twentyfirst.media/pro/components/PlanCard.md): Pricing tier for plan pages and upgrade dialogs. - [Product Card](https://ui.twentyfirst.media/pro/components/ProductCard.md): Product tile for catalogs and grids, plus the pieces it is made of: Price, Rating, StockBadge and ProductArt. (Price, ProductArt, ProductCard, Rating, StockBadge) - [Review Card](https://ui.twentyfirst.media/pro/components/ReviewCard.md): Moderating customer reviews before and after they go live. - [Variant Picker](https://ui.twentyfirst.media/pro/components/VariantPicker.md): Pick a product option: colour swatches or text pills (sizes, materials). ## Media - [Gallery](https://ui.twentyfirst.media/pro/components/Gallery.md): Images: Gallery (photos with thumbnails and full screen), BeforeAfter (drag to compare, e.g. (BeforeAfter, Gallery, ImageVariants) - [Carousel](https://ui.twentyfirst.media/pro/components/Carousel.md): A row of slides with previous/next buttons and dots. (Carousel, ProductArt) ## Foundations - [Key Value](https://ui.twentyfirst.media/pro/components/KeyValue.md): Small building blocks for detail panels: KeyValue (label/value list), Kbd (keyboard keys), Spinner, Collapsible. (Collapsible, Kbd, KeyValue, Spinner, StatusIndicator) - [Log View](https://ui.twentyfirst.media/pro/components/LogView.md): Monospace output: LogView for logs with line numbers and levels, CodeViewer for JSON, YAML and code. (CodeViewer, LogView) - [Settings Layout](https://ui.twentyfirst.media/pro/components/SettingsLayout.md): Standard settings page: a label column with one sentence on what it does, controls on the right, one row per topic. (Button, SecretField, Segmented, SettingsLayout, Switch) - [Split Pane](https://ui.twentyfirst.media/pro/components/SplitPane.md): Resizable list–detail layout. (InboxList, SplitPane) - [Status Indicator](https://ui.twentyfirst.media/pro/components/StatusIndicator.md): State as shape and colour together, so it reads at a glance and without colour vision. (Badge, StatusIndicator) - [Tree View](https://ui.twentyfirst.media/pro/components/TreeView.md): Hierarchies, in-place editing and object menus: TreeView, InlineEdit, ContextMenu. (ContextMenu, InlineEdit, KeyValue, TreeView) - [Accordion](https://ui.twentyfirst.media/pro/components/Accordion.md): Stacked sections that open and close. (Accordion, Badge, Panel) - [Separator](https://ui.twentyfirst.media/pro/components/Separator.md): Small layout primitives. (Separator, Label, AspectRatio, Input, Button) - [Button Group](https://ui.twentyfirst.media/pro/components/ButtonGroup.md): Attached buttons that act as one control: undo/redo, zoom, or a split button whose arrow opens a menu. (ButtonGroup, Button, IconButton, Popover, Menu) - [Scroll Area](https://ui.twentyfirst.media/pro/components/ScrollArea.md): A scrolling box with thin scrollbars in the kit's colours, vertical, horizontal or both. (ScrollArea, Avatar, Separator) - [Resizable Panels](https://ui.twentyfirst.media/pro/components/ResizablePanels.md): Two or more panes with drag handles between them, side by side or stacked; panels can nest. ## Real estate - [Listing Card](https://ui.twentyfirst.media/pro/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). (ListingCard, ResultsToolbar) - [Valuation Card](https://ui.twentyfirst.media/pro/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). (EnergyClass, SavedSearch, ValuationCard) ## Navigation - [Ambient](https://ui.twentyfirst.media/pro/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. (Ambient, Badge, Button, Panel, StatTile, UIProvider) - [Menubar](https://ui.twentyfirst.media/pro/components/Menubar.md): A desktop-style row of menus (File, Edit, View). (Menubar, Menu) - [Navigation Menu](https://ui.twentyfirst.media/pro/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. (NavigationMenu, Button) - [Tabs](https://ui.twentyfirst.media/pro/components/Tabs.md): A tab bar that switches views. (Tabs, Panel, KeyValue) - [Sidebar](https://ui.twentyfirst.media/pro/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. (Sidebar, UserMenu, WorkspaceSwitcher, Menu) - [User Menu](https://ui.twentyfirst.media/pro/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. (UserMenu, Card, Menu, Avatar) - [Floating Layout](https://ui.twentyfirst.media/pro/components/FloatingLayout.md): UI floating over a full-bleed background: a map, a 3D scene, a video or a photo. (Badge, FloatingLayout, IconButton, KeyValue, MapView, Panel, SearchField, Segmented) ## Life - [Habit Tracker](https://ui.twentyfirst.media/pro/components/HabitTracker.md): Habits with their last days as a row of marks: done, missed or no entry, today's mark a toggle. (HabitTracker, Panel) - [Mood Picker](https://ui.twentyfirst.media/pro/components/MoodPicker.md): A five-step mood scale with faces and words, as a radio group. (MoodPicker, Card) - [Vital Tile](https://ui.twentyfirst.media/pro/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/pro/components/ActivityRings.md): Concentric progress rings for daily goals (move, exercise, stand, steps, water) with a legend. (ActivityRings, Card) - [Sleep Chart](https://ui.twentyfirst.media/pro/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. (SleepChart, Panel) - [Medication List](https://ui.twentyfirst.media/pro/components/MedicationList.md): Today's doses in order, each with its time, name, dose, a status in words and a "taken" button. (MedicationList, Panel) - [Journal Entry](https://ui.twentyfirst.media/pro/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. (JournalEntry, IconButton) - [Goal Card](https://ui.twentyfirst.media/pro/components/GoalCard.md): A goal with its progress toward a target, a due date, milestones and a note. - [Insight Card](https://ui.twentyfirst.media/pro/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/pro/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/pro/components/BudgetList.md): Spending per category against its limit: spent and limit, a bar, and what is left or over in words. (BudgetList, Panel) - [Subscription List](https://ui.twentyfirst.media/pro/components/SubscriptionList.md): Recurring payments with their next charge, trial and cancelled states, and what they cost together a month and a year. (SubscriptionList, Panel) - [Net Worth Card](https://ui.twentyfirst.media/pro/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/pro/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. (DeadlineList, Panel) - [Policy Card](https://ui.twentyfirst.media/pro/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. (PolicyCard, Button) - [Coverage Matrix](https://ui.twentyfirst.media/pro/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. (CoverageMatrix, Panel) - [Claim Timeline](https://ui.twentyfirst.media/pro/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. (ClaimTimeline, Panel) - [Document List](https://ui.twentyfirst.media/pro/components/DocumentList.md): Important papers (IDs, contracts, policies, certificates) with category, holder and expiry: "Expired", "Expires in 19 days" or "Valid until May 2031". (DocumentList, Panel) ## Patterns - [AI Chat](https://ui.twentyfirst.media/pro/patterns/AIChatScreen.md): A complete screen built from AgentMark, AgentStatus, ApprovalCard, ChatMessage and 6 more components. - [Agent Builder](https://ui.twentyfirst.media/pro/patterns/AgentBuilderScreen.md): A complete screen built from Button, ChatMessage, Combobox, Composer and 7 more components. - [Analytics](https://ui.twentyfirst.media/pro/patterns/AnalyticsScreen.md): A complete screen built from AppShell, BarChart, Button, CountUp and 10 more components. - [Auth Card](https://ui.twentyfirst.media/pro/patterns/AuthCard.md): Centered card for sign-in, sign-up, password reset, two-step codes and invites. - [Billing](https://ui.twentyfirst.media/pro/patterns/BillingScreen.md): A complete screen built from AppShell, Avatar, Badge, BarChart and 9 more components. - [Board](https://ui.twentyfirst.media/pro/patterns/BoardScreen.md): A complete screen built from AppShell, AvatarStack, Badge, Button and 6 more components. - [Calendar](https://ui.twentyfirst.media/pro/patterns/CalendarScreen.md): A complete screen built from AppShell, Button, EventCard, IconButton and 4 more components. - [Customers](https://ui.twentyfirst.media/pro/patterns/CustomersScreen.md): A complete screen built from Avatar, Badge, Drawer, IconButton and 9 more components. - [Dashboard](https://ui.twentyfirst.media/pro/patterns/Dashboard.md): A complete screen built from AppShell, Badge, Button, Card and 10 more components. - [Files](https://ui.twentyfirst.media/pro/patterns/FilesScreen.md): A complete screen built from Chip, CommandPalette, FileCard, IconButton and 6 more components. - [Inbox](https://ui.twentyfirst.media/pro/patterns/InboxScreen.md): A complete screen built from AppShell, Avatar, Badge, Button and 9 more components. - [Invite Modal](https://ui.twentyfirst.media/pro/patterns/InviteModalScreen.md): A complete screen built from AppShell, Avatar, Badge, Button and 8 more components. - [Invoice](https://ui.twentyfirst.media/pro/patterns/InvoiceScreen.md): A complete screen built from Button, IconButton, InvoicePreview, PageHeader and 5 more components. - [Loading](https://ui.twentyfirst.media/pro/patterns/LoadingScreen.md): A complete screen built from AppShell, Badge, Button, Card and 7 more components. - [Map](https://ui.twentyfirst.media/pro/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/pro/patterns/MobileScreens.md): A complete screen built from Avatar, Badge, Card, Chip and 7 more components. - [People](https://ui.twentyfirst.media/pro/patterns/PeopleScreen.md): A complete screen built from AppShell, Avatar, Badge, Button and 11 more components. - [Pricing](https://ui.twentyfirst.media/pro/patterns/PricingScreen.md): A complete screen built from PageHeader, Panel, PlanCard, Segmented and 3 more components. - [Project](https://ui.twentyfirst.media/pro/patterns/ProjectScreen.md): A complete screen built from AppShell, Avatar, AvatarStack, Badge and 11 more components. - [Settings](https://ui.twentyfirst.media/pro/patterns/SettingsScreen.md): A complete screen built from AppShell, Avatar, Button, IconButton and 7 more components. - [Setup](https://ui.twentyfirst.media/pro/patterns/SetupScreen.md): A complete screen built from Button, IconButton, PageHeader, StatTile and 4 more components. - [Shop](https://ui.twentyfirst.media/pro/patterns/ShopScreen.md): A complete screen built from Alert, Button, Funnel, PageHeader and 5 more components. - [Sign In](https://ui.twentyfirst.media/pro/patterns/SignInScreen.md): A complete screen built from AvatarStack, Badge, Button, Checkbox and 6 more components. - [Status](https://ui.twentyfirst.media/pro/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/pro/patterns/StorefrontScreen.md): A complete screen built from Breadcrumb, Button, IconButton, Price and 6 more components. - [Wellbeing](https://ui.twentyfirst.media/pro/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/pro/patterns/WorkflowScreen.md): A complete screen built from Badge, Button, Flow, IconButton and 6 more components. - [Sidebar Shell](https://ui.twentyfirst.media/pro/patterns/SidebarShellScreen.md): The app shell with a labelled sidebar instead of the icon rail: AppShell navigation="sidebar". - [Attached Sidebar](https://ui.twentyfirst.media/pro/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/pro/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/pro/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/pro/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/pro/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/pro/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/pro/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/pro/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/pro/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. ## Icons `Icon name` and every `icon` prop take one of: `thumbUp`, `thumbDown`, `arrowUp`, `heart`, `tag`, `cart`, `package`, `truck`, `plus`, `minus`, `check`, `x`, `more`, `search`, `bell`, `clock`, `eye`, `edit`, `trash`, `users`, `user`, `home`, `chart`, `mail`, `grid`, `share`, `menu`, `play`, `calendar`, `file`, `card`, `swap`, `send`, `download`, `book`, `chevronDown`, `chevronLeft`, `chevronRight`, `arrowUpRight`, `sparkle`, `filter`, `settings`, `lock`, `link`, `paperclip`, `star`, `flag`, `trend`, `globe`, `inbox`, `logout`, `moon`, `bot`, `code`, `branch`, `terminal`, `server`, `key`, `database`, `refresh`, `pause`, `archive`, `reply`, `shield`, `help`, `cpu`, `zap`, `folder`, `image`, `pin`, `map`, `upload`, `copy`, `bed`, `ruler`, `wallet`, `ban`, `list`, `layers`, `bold`, `italic`, `underline`, `olist`, `heading`, `quote`, `undo`, `redo`, `monitor`, `phone`, `expand`, `sun`, `cookie`, `webhook`. The icon library adds 690 more (passkeys, social and brand logos, files, media, commerce …); see the Icons guide. Library icons need one registration before use: `import { registerIcons } from "@twentyfirstmedia/"; import { fingerprint, brandGithub } from "@twentyfirstmedia//icons"; registerIcons({ fingerprint, brandGithub });` (or `registerIcons(ICON_LIBRARY)` for all). Custom elements (`@twentyfirstmedia/elements`) have them all registered.