# UI and Components > Compose headless behavior with theme-owned appearance, accessible structures, and explicit state. Source: [https://askrjs.com/docs/components](https://askrjs.com/docs/components) Status: stable. Packages: @askrjs/ui, @askrjs/themes. **Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue. ## Example ```tsx import { Button, ThemeScope, ThemeToggle } from '@askrjs/themes/components'; ``` ## Headless and themed layers Askr's component system is split into two packages that ship separately: @askrjs/ui, which owns interaction behavior, focus handling, and ARIA wiring with no visual opinion at all, and @askrjs/themes, which owns the default look, CSS tokens, and a styled component catalog built on top of it. When a headless primitive exists — Button, Dialog, Select, and similar — the themed version literally imports and wraps it rather than reimplementing behavior, so keyboard handling and state management stay in one place. Reach for @askrjs/ui directly when you're writing your own design system from scratch, or @askrjs/themes when you want a shipped, styled result. ## Package boundaries The split follows a simple rule from the themes package's own docs: @askrjs/askr owns what exists and when, @askrjs/ui owns behavior, state, focus, and ARIA coordination, and @askrjs/themes owns visual-only components plus Block-first structural presets. Concretely, Button ships from @askrjs/ui and @askrjs/themes re-exports and styles it, while ButtonGroup, Close, Field, and InputGroup live only in themes because they're pure visual composition wrappers with no independent behavior to headless-ify. Knowing which package owns a given piece tells you where to look when something needs fixing — behavior bugs live upstream in @askrjs/ui, visual bugs live in @askrjs/themes. ## Component page contract Every component page in this section follows the same shape — purpose, install and import, live examples, anatomy, state model, keyboard and accessibility, styling and tokens, an API reference grounded in the real prop types, edge cases, and related pages — so once you've read one you know how to navigate the rest. Pages link out to the specific @askrjs/ui and @askrjs/themes subpath exports they cover rather than the package roots, which keeps import statements copy-pasteable. If a page has no @askrjs/ui subpath listed, that's not an oversight: it means the component genuinely has no headless counterpart and ships only as a themed component. ## Experimental families A handful of component families are marked experimental — Combobox and Command, Calendar and Date Picker, Native Select and Input OTP, and Drawer and Sheet — and all four share the same reason: none of them has an @askrjs/ui headless primitive backing them. They exist only in @askrjs/themes today, which means their behavior and markup are more likely to change shape as a headless version gets built out. Treat their APIs as less stable than the rest of the catalog and expect follow-up releases to adjust them. ## In this section - [Headless versus Themed](https://askrjs.com/docs/components/headless-versus-themed/index.md): Headless versus Themed: anatomy, keyboard behavior, state, and theming in Askr. - [Composition and Accessibility](https://askrjs.com/docs/components/composition-and-accessibility/index.md): Composition and Accessibility: anatomy, keyboard behavior, state, and theming in Askr. - [Theme Tokens, Modes, and Direction](https://askrjs.com/docs/components/theme-tokens-modes-and-direction/index.md): Theme Tokens, Modes, and Direction: anatomy, keyboard behavior, state, and theming in Askr. - [Customization](https://askrjs.com/docs/components/customization/index.md): Customization: anatomy, keyboard behavior, state, and theming in Askr. - [Structures](https://askrjs.com/docs/components/structures/index.md): Structures: anatomy, keyboard behavior, state, and theming in Askr. - [Portals and Layers](https://askrjs.com/docs/components/portals-and-layers/index.md): Portals and Layers: anatomy, keyboard behavior, state, and theming in Askr. - [Collections](https://askrjs.com/docs/components/collections/index.md): Collections: anatomy, keyboard behavior, state, and theming in Askr. - [Interaction Policies](https://askrjs.com/docs/components/interaction-policies/index.md): Interaction Policies: anatomy, keyboard behavior, state, and theming in Askr. - [Focus and Dismissal](https://askrjs.com/docs/components/focus-and-dismissal/index.md): Focus and Dismissal: anatomy, keyboard behavior, state, and theming in Askr. - [Controlled State](https://askrjs.com/docs/components/controlled-state/index.md): Controlled State: anatomy, keyboard behavior, state, and theming in Askr. - [ARIA and Ref Utilities](https://askrjs.com/docs/components/aria-and-ref-utilities/index.md): ARIA and Ref Utilities: anatomy, keyboard behavior, state, and theming in Askr. - [Icon Contract](https://askrjs.com/docs/components/icon-contract/index.md): Icon Contract: anatomy, keyboard behavior, state, and theming in Askr. - [Button and Button Group](https://askrjs.com/docs/components/button-and-button-group/index.md): Button and Button Group: anatomy, keyboard behavior, state, and theming in Askr. - [Input](https://askrjs.com/docs/components/input/index.md): Input: anatomy, keyboard behavior, state, and theming in Askr. - [Textarea](https://askrjs.com/docs/components/textarea/index.md): Textarea: anatomy, keyboard behavior, state, and theming in Askr. - [Checkbox](https://askrjs.com/docs/components/checkbox/index.md): Checkbox: anatomy, keyboard behavior, state, and theming in Askr. - [Radio Group](https://askrjs.com/docs/components/radio-group/index.md): Radio Group: anatomy, keyboard behavior, state, and theming in Askr. - [Select](https://askrjs.com/docs/components/select/index.md): Select: anatomy, keyboard behavior, state, and theming in Askr. - [Slider](https://askrjs.com/docs/components/slider/index.md): Slider: anatomy, keyboard behavior, state, and theming in Askr. - [Switch](https://askrjs.com/docs/components/switch/index.md): Switch: anatomy, keyboard behavior, state, and theming in Askr. - [Toggle Family](https://askrjs.com/docs/components/toggle-family/index.md): Toggle Family: anatomy, keyboard behavior, state, and theming in Askr. - [Form, Label, Field, and Input Group](https://askrjs.com/docs/components/form-label-field-and-input-group/index.md): Form, Label, Field, and Input Group: anatomy, keyboard behavior, state, and theming in Askr. - [Combobox and Command](https://askrjs.com/docs/components/combobox-and-command/index.md): Combobox and Command: anatomy, keyboard behavior, state, and theming in Askr. - [Calendar and Date Picker](https://askrjs.com/docs/components/calendar-and-date-picker/index.md): Calendar and Date Picker: anatomy, keyboard behavior, state, and theming in Askr. - [Native Select and Input OTP](https://askrjs.com/docs/components/native-select-and-input-otp/index.md): Native Select and Input OTP: anatomy, keyboard behavior, state, and theming in Askr. - [Dialog](https://askrjs.com/docs/components/dialog/index.md): Dialog: anatomy, keyboard behavior, state, and theming in Askr. - [Alert Dialog](https://askrjs.com/docs/components/alert-dialog/index.md): Alert Dialog: anatomy, keyboard behavior, state, and theming in Askr. - [Popover](https://askrjs.com/docs/components/popover/index.md): Popover: anatomy, keyboard behavior, state, and theming in Askr. - [Hover Card](https://askrjs.com/docs/components/hover-card/index.md): Hover Card: anatomy, keyboard behavior, state, and theming in Askr. - [Tooltip](https://askrjs.com/docs/components/tooltip/index.md): Tooltip: anatomy, keyboard behavior, state, and theming in Askr. - [Menu, Dropdown, and Context Menu](https://askrjs.com/docs/components/menu-dropdown-and-context-menu/index.md): Menu, Dropdown, and Context Menu: anatomy, keyboard behavior, state, and theming in Askr. - [Drawer and Sheet](https://askrjs.com/docs/components/drawer-and-sheet/index.md): Drawer and Sheet: anatomy, keyboard behavior, state, and theming in Askr. - [Menubar](https://askrjs.com/docs/components/menubar/index.md): Menubar: anatomy, keyboard behavior, state, and theming in Askr. - [Tabs](https://askrjs.com/docs/components/tabs/index.md): Tabs: anatomy, keyboard behavior, state, and theming in Askr. - [Sidebar](https://askrjs.com/docs/components/sidebar/index.md): Sidebar: anatomy, keyboard behavior, state, and theming in Askr. - [Navbar and Navigation Menu](https://askrjs.com/docs/components/navbar-and-navigation-menu/index.md): Navbar and Navigation Menu: anatomy, keyboard behavior, state, and theming in Askr. - [Breadcrumb and Pagination](https://askrjs.com/docs/components/breadcrumb-and-pagination/index.md): Breadcrumb and Pagination: anatomy, keyboard behavior, state, and theming in Askr. - [Application Chrome](https://askrjs.com/docs/components/application-chrome/index.md): Application Chrome: anatomy, keyboard behavior, state, and theming in Askr. - [Table](https://askrjs.com/docs/components/table/index.md): Table: anatomy, keyboard behavior, state, and theming in Askr. - [Data Table](https://askrjs.com/docs/components/data-table/index.md): Data Table: anatomy, keyboard behavior, state, and theming in Askr. - [Virtual List](https://askrjs.com/docs/components/virtual-list/index.md): Virtual List: anatomy, keyboard behavior, state, and theming in Askr. - [Virtual Table](https://askrjs.com/docs/components/virtual-table/index.md): Virtual Table: anatomy, keyboard behavior, state, and theming in Askr. - [Scroll Area](https://askrjs.com/docs/components/scroll-area/index.md): Scroll Area: anatomy, keyboard behavior, state, and theming in Askr. - [Card](https://askrjs.com/docs/components/card/index.md): Card: anatomy, keyboard behavior, state, and theming in Askr. - [Avatar and Item](https://askrjs.com/docs/components/avatar-and-item/index.md): Avatar and Item: anatomy, keyboard behavior, state, and theming in Askr. - [Typography and Display Primitives](https://askrjs.com/docs/components/typography-and-display-primitives/index.md): Typography and Display Primitives: anatomy, keyboard behavior, state, and theming in Askr. - [Layout Primitives](https://askrjs.com/docs/components/application-layout/index.md): Start here for layout: use Block as the general-purpose primitive, then compose Container and Text with exact published prop values. - [Advanced Layout](https://askrjs.com/docs/components/advanced-layout/index.md): Advanced Layout: anatomy, keyboard behavior, state, and theming in Askr. - [Accordion and Collapsible](https://askrjs.com/docs/components/accordion-and-collapsible/index.md): Accordion and Collapsible: anatomy, keyboard behavior, state, and theming in Askr. - [Progress](https://askrjs.com/docs/components/progress/index.md): Progress: anatomy, keyboard behavior, state, and theming in Askr. - [Toast and Sonner](https://askrjs.com/docs/components/toast-and-sonner/index.md): Toast and Sonner: anatomy, keyboard behavior, state, and theming in Askr. - [Alert, Badge, Empty, Skeleton, Spinner, and Stat](https://askrjs.com/docs/components/alert-badge-empty-skeleton-spinner-and-stat/index.md): Alert, Badge, Empty, Skeleton, Spinner, and Stat: anatomy, keyboard behavior, state, and theming in Askr. - [Charts](https://askrjs.com/docs/charts/index.md): Charts: anatomy, keyboard behavior, state, and theming in Askr. - [Channels and Transforms](https://askrjs.com/docs/charts/channels-and-transforms/index.md): Channels and Transforms: anatomy, keyboard behavior, state, and theming in Askr. - [Scales](https://askrjs.com/docs/charts/scales/index.md): Scales: anatomy, keyboard behavior, state, and theming in Askr. - [Cartesian Marks](https://askrjs.com/docs/charts/cartesian-marks/index.md): Cartesian Marks: anatomy, keyboard behavior, state, and theming in Askr. - [Radial Marks](https://askrjs.com/docs/charts/radial-marks/index.md): Radial Marks: anatomy, keyboard behavior, state, and theming in Askr. - [Grid and Annotation Marks](https://askrjs.com/docs/charts/grid-and-annotation-marks/index.md): Grid and Annotation Marks: anatomy, keyboard behavior, state, and theming in Askr. - [Interactions](https://askrjs.com/docs/charts/interactions/index.md): Interactions: anatomy, keyboard behavior, state, and theming in Askr. - [Live Data and View State](https://askrjs.com/docs/charts/live-and-view-state/index.md): Live Data and View State: anatomy, keyboard behavior, state, and theming in Askr. - [Export](https://askrjs.com/docs/charts/export/index.md): Export: anatomy, keyboard behavior, state, and theming in Askr. - [Recipes](https://askrjs.com/docs/charts/recipes/index.md): Recipes: anatomy, keyboard behavior, state, and theming in Askr. - [Accessibility and SSR](https://askrjs.com/docs/charts/accessibility-and-ssr/index.md): Accessibility and SSR: anatomy, keyboard behavior, state, and theming in Askr. - [Migration from Charts 0.1](https://askrjs.com/docs/charts/migration-0-1/index.md): Migration from Charts 0.1: anatomy, keyboard behavior, state, and theming in Askr. - [Integrations](https://askrjs.com/docs/integrations/index.md): Integrations: anatomy, keyboard behavior, state, and theming in Askr. - [Monaco Editor](https://askrjs.com/docs/integrations/monaco-editor/index.md): Monaco Editor: anatomy, keyboard behavior, state, and theming in Askr. - [Icons and Logos](https://askrjs.com/docs/integrations/icons-and-logos/index.md): Icons and Logos: anatomy, keyboard behavior, state, and theming in Askr. - [Lucide Gallery](https://askrjs.com/docs/integrations/lucide-gallery/index.md): Lucide Gallery: anatomy, keyboard behavior, state, and theming in Askr. ## Documentation navigation [Previous](https://askrjs.com/docs/platform-services/open-telemetry/index.md) | [Next](https://askrjs.com/docs/components/headless-versus-themed/index.md)