# 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](/docs/components/button)     | Triggering actions with loading, toggle, and icon support.            |
| [Checkbox](/docs/components/checkbox) | Selecting multiple options or representing a mixed state.             |
| [Input](/docs/components/input)       | Building text inputs with labels, affixes, icons, chips, and actions. |
| [Label](/docs/components/label)       | Labeling controls, sections, and compact metadata.                    |
| [Radio](/docs/components/radio)       | Choosing one option from a mutually exclusive set.                    |
| [Select](/docs/components/select)     | Choosing from a keyboard-accessible list with typeahead.              |
| [Switch](/docs/components/switch)     | Turning a single setting on or off.                                   |

## Navigation & disclosure

| Component                                 | Use it for                                                 |
| ----------------------------------------- | ---------------------------------------------------------- |
| [Accordion](/docs/components/accordion)   | Organizing related details into collapsible sections.      |
| [Breadcrumb](/docs/components/breadcrumb) | Showing the current location within a hierarchy.           |
| [Tabs](/docs/components/tabs)             | Switching between related panels without leaving the task. |

## Feedback & status

| Component                           | Use it for                                                               |
| ----------------------------------- | ------------------------------------------------------------------------ |
| [Alert](/docs/components/alert)     | Presenting contextual success, warning, information, or danger messages. |
| [Badge](/docs/components/badge)     | Displaying compact status, count, or category labels.                    |
| [Chip](/docs/components/chip)       | Representing filters, selections, and removable values.                  |
| [Spinner](/docs/components/spinner) | Communicating indeterminate loading work.                                |
| [Tooltip](/docs/components/tooltip) | Adding short contextual information on hover or focus.                   |

## Content & overlays

| Component                           | Use it for                                                     |
| ----------------------------------- | -------------------------------------------------------------- |
| [Card](/docs/components/card)       | Grouping related content, summaries, and actions.              |
| [Dialog](/docs/components/dialog)   | Handling focused forms, confirmations, and blocking decisions. |
| [Drawer](/docs/components/drawer)   | Showing navigation, filters, or details over the current page. |
| [Popover](/docs/components/popover) | Displaying additional content or actions in a floating panel.  |

Start with [Composition & styling](/docs/foundations/composition-styling) to
learn the shared compound, slot, and customization model.