# Patterns

> 37 complete screens built only from kit components. Each page has the full code.

- [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.