Components

Browse the shipped @takeoff-ui/react-spar component surface. Each reference includes live examples, public props, compound parts, stable data attributes, and accessibility guidance where the component owns interaction behavior.

Actions & form controls

Component	Use it for
Button	Triggering actions with loading, toggle, and icon support.
Checkbox	Selecting multiple options or representing a mixed state.
Dropdown	Presenting contextual action menus from a trigger.
Input	Building text inputs with labels, affixes, icons, chips, and actions.
Label	Labeling controls, sections, and compact metadata.
Radio	Choosing one option from a mutually exclusive set.
Select	Choosing from a keyboard-accessible list with typeahead.
Switch	Turning a single setting on or off.
Upload	Selecting and validating files with browse, drag-and-drop, and a list.

Navigation & disclosure

Component	Use it for
Accordion	Organizing related details into collapsible sections.
Breadcrumb	Showing the current location within a hierarchy.
Tabs	Switching between related panels without leaving the task.

Feedback & status

Component	Use it for
Alert	Presenting contextual success, warning, information, or danger messages.
Badge	Displaying compact status, count, or category labels.
Chip	Representing filters, selections, and removable values.
Progress	Showing determinate task or process completion.
Skeleton	Reserving layout while content is loading.
Spinner	Communicating indeterminate loading work.
Stepper	Guiding users through a sequenced multi-step flow.
Toast	Showing transient confirmations, alerts, and background task updates.
Tooltip	Adding short contextual information on hover or focus.

Content & overlays

Component	Use it for
Calendar	Picking a day, a date range, or several dates from a month grid.
Card	Grouping related content, summaries, and actions.
Dialog	Handling focused forms, confirmations, and blocking decisions.
Divider	Separating content sections with an optional aligned label.
Drawer	Showing navigation, filters, or details over the current page.
Popover	Displaying additional content or actions in a floating panel.
Table	Scanning, sorting, filtering, and paginating structured data.

Patterns

Composed from the components above rather than shipped as one. There is no component to import — the page shows the composition, and the design system supplies the pieces it needs.

Pattern	Use it for
DatePicker	Picking a date behind a trigger: Popover + Calendar, and for a typable field, useDatePicker.

Start with Composition & styling to learn the shared compound, slot, and customization model.