# Crossroads UI > A token-driven, accessible React component system. Every component is > WCAG AA and RTL-ready, and light/dark, rounded/flat and LTR/RTL all > resolve from one set of CSS custom properties without a rebuild. Package: @crossroads/ui — 92 ready components in 13 groups. Generated: 2026-09-02 ## Machine-readable manifests - [Component manifest](https://crossroadsui.com/ai/component.manifest.json): every component, its props, examples, usage rules and accessibility notes. - [Template manifest](https://crossroadsui.com/ai/template.manifest.json): 4 source-owned page and section compositions. - [Token manifest](https://crossroadsui.com/ai/tokens.manifest.json): 519 design tokens grouped by concern. - [Recipes](https://crossroadsui.com/ai/recipes.manifest.json): prompt to on-system code pairs. - [Storybook](https://crossroadsui.com/storybook/): every component rendered, with a live code sandbox. ## Rules for generating Crossroads UI code 1. Import components from `@crossroads/ui` only. Do not invent component names — check the component manifest's `exports`. 2. Compound components are exported flat and as namespaces: ``/`` and `SelectRoot`/`SelectOption` both exist. 3. Never hardcode colors, spacing, radii or motion. Use the `--cr-*` custom properties from the token manifest. 4. Use logical CSS properties (`inline-start`, `block-end`) so RTL keeps working. 5. Keep visible labels, keyboard access, focus-visible styles and reduced-motion support intact. 6. Wrap an app in `CrossroadsProvider`; components that render in a portal also need a portal root. ## Flagship components ### Button Contained, outlined, text, loading, and responsive action button. Use for: Submit a form; Confirm or cancel in a dialog; Primary call to action on a page. Exports: Button. ### TextField Single-line text input with labels, descriptions, errors, and leading or trailing icons. Use for: Collect a name or email; Search input; Field with helper text and validation errors. Exports: TextField, TextFieldControl. ### Select Native select wrapper with field states. Use for: Choose one option from a known list; Settings dropdown; Filter control. Exports: Select, SelectControl, SelectOption, SelectRoot. ### Autocomplete Text input with suggested options and keyboard navigation. Use for: Pick from a long list; Assign a person to a task; Type-ahead search. Exports: Autocomplete. ### Table Responsive semantic table with density controls. Use for: List records with sorting; Admin data view; Dense reporting screen. Exports: Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHead, TableHeaderCell, TableLoading, TablePagination, TableRow, TableSelectionCell, TableSortButton. ### Stat Metric block for dashboards and summaries. Use for: Dashboard KPI; Summary figure with trend; Metric tile above a chart. Exports: Stat. ### VisualCard Media-forward card for visual content, posters, uploads, and feature previews. Use for: Marketing feature card; Content tile with media; Product listing. Exports: VisualCard. ### Card Bounded content container for repeated display items. Use for: Group related content; Settings section; Summary panel. Exports: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia. ### SelectableCard Card-shaped selectable option for button, radio, and checkbox flows. Use for: Plan or tier picker; Choose one of several options visually; Onboarding choice. Exports: SelectableCard, SelectableCardGroup. ### ActionCard Reusable icon-bearing navigation card for indexes and action lists. Use for: Navigate to a section; Launch a task from a dashboard; Quick action tile. Exports: ActionCard. ### Panel Semantic in-page section with title, description, body, actions, footer, collapse, and loading composition. Use for: Settings section; Dashboard content region; Form section with actions. Exports: Panel, PanelRoot, PanelHeader, PanelTitle, PanelDescription, PanelBody, PanelFooter, PanelSeparator. ### AppBar Top application bar for product navigation and actions. Use for: Application top bar; Page header with actions; Brand plus account menu. Exports: AppBar. ### NavigationDrawer Collapsible sidebar navigation with icon rail and responsive behavior. Use for: Primary app navigation; Collapsible sidebar; Mobile navigation panel. Exports: NavigationDrawer, NavigationDrawerBody, NavigationDrawerDivider, NavigationDrawerFooter, NavigationDrawerHeader, NavigationDrawerItem, NavigationDrawerNav, NavigationDrawerRoot, NavigationDrawerToggle. ### Tabs Keyboard-friendly tablist and tab panel navigation. Use for: Switch between views in one page; Settings sections; Detail page panels. Exports: Tabs, TabsList, TabsPanel, TabsRoot, TabsTab. ### Stepper Progressive multi-step workflow indicator. Use for: Multi-step onboarding; Checkout flow; Progress through a wizard. Exports: Stepper, StepperRoot, StepperStep. ### Dialog Modal dialog with focus restoration and escape handling. Use for: Confirm a destructive action; Focused form in an overlay; Detail view without leaving the page. Exports: Dialog. ### Drawer Edge-attached modal panel with logical placement. Use for: Side panel for details; Filters panel; Edit form beside the list. Exports: Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerDivider, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger. ### Snackbar Temporary non-blocking notification with optional action. Use for: Confirm an action succeeded; Non-blocking error notice; Undo affordance. Exports: Snackbar. ### Progress Linear and circular progress indicators for determinate and indeterminate work. Use for: File upload progress; Multi-step completion; Indeterminate loading. Exports: Progress. ### Skeleton Placeholder loading state for content that is not ready yet. Use for: Placeholder while data loads; Perceived performance on lists; Card loading state. Exports: Skeleton. ### EmptyState Centered empty content message with optional action. Use for: No results after filtering; First-run experience; Cleared inbox. Exports: EmptyState. ### Accordion Multi-section disclosure with keyboard navigation. Use for: FAQ section; Progressive disclosure in dense settings; Grouped detail panels. Exports: Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger. ### Toast App-wide queued notifications with imperative show, update, dismiss, and promise flows. Use for: Queue application notifications; Track async work; Offer a non-blocking recovery action. Exports: Toast, ToastProvider, useToast. ### SegmentedControl Single-choice segmented controller with keyboard support. Use for: Switch between two or three modes; View toggle; Compact filter. Exports: SegmentedControl, SegmentedControlOption, SegmentedControlRoot. ## Example prompts this system answers - Build a notification-settings section: email and push toggles, a digest frequency select, and a save button. (recipe: `notification-settings`) - Show a table of team members with their status. (recipe: `members-table`) - Show a friendly empty state when there are no projects yet. (recipe: `empty-state`) - Show placeholder rows while the list is loading. (recipe: `loading-placeholder`) - Confirm to the user that their settings were saved, with an undo. (recipe: `save-confirmation`) ## Source-owned templates - Sign in: Centered authentication card with email and password, inline error, and a route to account recovery. (template: `sign-in`) - Pricing plans: Three-tier plan selection with a billing-period toggle and a highlighted recommended plan. (template: `pricing-plans`) - Error page: Full-page not-found and server-error states with a way back and a support route. (template: `error-page`)