Production patterns
37 canonical screen patterns across 4 source-defined domain packs. The inventory comes from apps/showcase/patterns/**/screens; purpose and application-boundary prose come from docs/pattern-library.content.json. CI fails if either side drifts.
A pattern is a composition recipe, not a framework layer and not an application. Fetching, routing, persistence, authentication and business rules stay in your app — each detail page states exactly what the pattern excludes. For a routed product application built from these, see the Demo.
Every Showcase link opens the real Web runtime at that exact pattern; named states are individually addressable from each detail page. Web preview is not native-device evidence.
Authentication + Onboarding
Section titled “Authentication + Onboarding”9 patterns.
| Pattern | Purpose | Named states | Composes | Showcase |
|---|---|---|---|---|
| Forgot Password | Request a password-reset code for an account email. | — | Button, Card, Field, Input, Link, VStack |
Open |
| Interests Onboarding | Let a new user pick interest topics during onboarding. | — | Button, Card, Chip, ChipGroup, HStack, Link, +2 more |
Open |
| Password Updated | Confirmation surface after a password change succeeds. | — | Box, Button, Card, Text, VStack |
Open |
| Profile Setup | Collect display name, username, bio, and photo for a new profile. | — | AlertBanner, Avatar, Button, Card, Field, Input, +3 more |
Open |
| Reset Password | Enter and confirm a new password behind a reset flow. | default, loading |
Button, Card, Field, PasswordInput, VStack |
Open |
| Sign In | Email/password sign-in with social and forgot-password affordances. | default, invalid, server-error, loading |
Button, Card, Field, Input, Link, PasswordInput, +2 more |
Open |
| Sign Up | Account creation with terms acceptance and social sign-up. | default, invalid, loading |
AlertBanner, Button, Card, Checkbox, Field, Input, +4 more |
Open |
| Verify Code | Enter a one-time verification code with resend and destination change. | default, invalid, loading |
Button, Card, Field, HStack, Link, OTPInput, +2 more |
Open |
| Welcome | First-run welcome surface routing to get-started or sign-in. | — | Box, Button, Card, HStack, Text, VStack |
Open |
Dashboard + Finance
Section titled “Dashboard + Finance”8 patterns.
| Pattern | Purpose | Named states | Composes | Showcase |
|---|---|---|---|---|
| Analytics | Range-filtered analytics dashboard with metric summaries. | default, empty |
Card, EmptyState, HStack, Progress, Stat, StatLabel, +6 more |
Open |
| Dashboard Overview | Finance dashboard overview with balances, activity, and primary actions. | default, loading, empty |
Button, Card, EmptyState, HStack, Skeleton, Text, +1 more |
Open |
| Invoice Detail | Read-only invoice detail with download and share actions. | — | Badge, Button, Card, DescriptionItem, DescriptionList, HStack, +2 more |
Open |
| Payment Methods | List and manage saved payment methods. | — | Badge, Button, Card, HStack, Text, VStack |
Open |
| Subscription | Current subscription plan with upgrade, manage, and cancel actions. | default, usage-warning |
Badge, Button, Card, HStack, Progress, Text, +1 more |
Open |
| Transaction Detail | Read-only transaction detail with receipt and help actions. | — | Badge, Button, Card, DescriptionItem, DescriptionList, HStack, +2 more |
Open |
| Transactions | Searchable, filterable transaction list with loading/error/retry states. | default, filtered-empty, error |
Button, Card, EmptyState, ErrorState, SearchInput, Tabs, +4 more |
Open |
| Wallet | Wallet home with accounts, balances, and money-movement actions. | default, no-payment-methods |
Button, Card, EmptyState, HStack, Text, VStack |
Open |
Commerce + Social
Section titled “Commerce + Social”12 patterns.
| Pattern | Purpose | Named states | Composes | Showcase |
|---|---|---|---|---|
| Cart | Shopping cart with quantity edits, removal, and checkout. | default, empty |
Button, Card, EmptyState, HStack, Separator, Text, +1 more |
Open |
| Checkout | Order review with address editing and place-order action. | default, processing, problem |
AlertBanner, Button, Checkbox, HStack, Radio, RadioGroup, +3 more |
Open |
| Messages | Conversation list for a direct-messages inbox. | default, empty |
EmptyState, SearchInput, Text, VStack |
Open |
| Notifications | Notification feed with mark-read and selection. | default, empty |
Avatar, Badge, Button, Card, EmptyState, HStack, +2 more |
Open |
| Order Detail | Order detail with reorder and support actions. | — | Badge, Button, Card, HStack, Separator, Text, +3 more |
Open |
| Orders | Order history list with selection. | default, empty |
Badge, Button, Card, EmptyState, HStack, SegmentedControl, +3 more |
Open |
| Post Detail | Social post detail with like, share, and comment submission. | — | Avatar, Button, Card, HStack, Input, Separator, +2 more |
Open |
| Product Detail | Product detail with add-to-cart and favorite actions. | — | Badge, Button, Card, Chip, ChipGroup, HStack, +3 more |
Open |
| Product Feed | Browsable product grid with search and favorites. | default, loading |
Badge, Box, Button, Card, Chip, ChipGroup, +5 more |
Open |
| Product Search | Product search results with sort and filter affordances. | default, empty |
Box, Button, Card, Chip, ChipGroup, EmptyState, +5 more |
Open |
| Social Feed | Social timeline with like, comment, share, and compose. | default, empty |
Avatar, Button, Card, EmptyState, HStack, Skeleton, +2 more |
Open |
| User Profile | Public user profile with follow and post-open actions. | — | Avatar, Button, Card, EmptyState, HStack, Separator, +2 more |
Open |
Account + Settings
Section titled “Account + Settings”8 patterns.
| Pattern | Purpose | Named states | Composes | Showcase |
|---|---|---|---|---|
| Account | Account hub with linked accounts, devices, sign-out, and delete. | — | ListGroup, Separator, SettingsItem, Text, VStack |
Open |
| Appearance | Theme/appearance preference selection. | — | Box, HStack, SegmentedControl, SegmentedControlItem, Text, VStack |
Open |
| Change Password | Change password with current/new/confirm fields. | default, invalid, server-error, saving, success |
AlertBanner, Box, Button, Field, HStack, PasswordInput, +2 more |
Open |
| Edit Profile | Edit profile fields and avatar with save. | default, invalid, server-error, saving |
AlertBanner, Avatar, Box, Button, Field, HStack, +3 more |
Open |
| Notification Settings | Toggle notification channels and categories. | default, master-off |
ListGroup, Separator |
Open |
| Privacy Security | Privacy and security settings hub with sessions and 2FA entries. | default, two-factor-off |
Badge, ListGroup, Separator, SettingsItem |
Open |
| Profile | Personal profile summary routing to edit, account, and activity. | — | Box, HStack, ListGroup, Separator, SettingsItem, Text, +1 more |
Open |
| Settings | Top-level settings menu routing to account, privacy, and appearance. | — | Badge, ListGroup, ListGroupHeader, Separator, SettingsItem, Switch |
Open |