# Takeoff Spar > React-first wrapper layer (`@takeoff-ui/react-spar`) over the Spar headless primitives, styled with Takeoff design tokens. Each link below is a clean Markdown version of a docs page, written for LLMs. Download one page for focused context, or use llms-full.txt for the entire library in a single file. Import components from `@takeoff-ui/react-spar`. ## Getting Started - [Installation](https://takeoff-v2.app.turkishtechlab.com/docs/installation.md): Install the packages, import the token stylesheet, wrap the provider. - [Getting Started](https://takeoff-v2.app.turkishtechlab.com/docs/index.md) ## Foundations - [Composition & Styling](https://takeoff-v2.app.turkishtechlab.com/docs/foundations/composition-styling.md): Understand compound component anatomy, slots, classes, and stable data attributes. - [Theming & Tokens](https://takeoff-v2.app.turkishtechlab.com/docs/foundations/theming.md): Configure Takeoff design tokens, color mode, locale, and shared component defaults. ## Components - [Accordion](https://takeoff-v2.app.turkishtechlab.com/docs/components/accordion.md): Organizes related content into collapsible sections so users can scan a page and reveal details as needed. - [Alert](https://takeoff-v2.app.turkishtechlab.com/docs/components/alert.md): A contextual feedback surface for success, warning, informational, danger, and neutral messages. - [Badge](https://takeoff-v2.app.turkishtechlab.com/docs/components/badge.md): A small visual indicator for status, count, or category labeling. Supports variants, sizes, appearances, and icon slots. - [Breadcrumb](https://takeoff-v2.app.turkishtechlab.com/docs/components/breadcrumb.md): Shows the user's current location as a trail of links back through the site hierarchy, so they can jump up the path without using the browser back button. - [Button](https://takeoff-v2.app.turkishtechlab.com/docs/components/button.md): A clickable element that triggers an action. Supports loading, toggle, and icon slots. - [Switch](https://takeoff-v2.app.turkishtechlab.com/docs/components/switch.md): Lets users turn a single setting on or off, especially for preferences, permissions, and form options. - [Checkbox](https://takeoff-v2.app.turkishtechlab.com/docs/components/checkbox.md): Lets users select one or more options or toggle a single setting on or off, with support for an indeterminate mixed state. - [Drawer](https://takeoff-v2.app.turkishtechlab.com/docs/components/drawer.md): A slide-in side panel built on top of Spar's Dialog primitive. Use it for navigation menus, detail views, filters, or any content that should overlay the current page without a full-page transition. - [Card](https://takeoff-v2.app.turkishtechlab.com/docs/components/card.md): A flexible content container for grouped information, summaries, and actions. Provides composable header, title, description, body, and footer parts. - [Chip](https://takeoff-v2.app.turkishtechlab.com/docs/components/chip.md): Compact inline labels for filters, selections, and user-entered values. Supports variants, sizes, and optional remove actions. - [Dialog](https://takeoff-v2.app.turkishtechlab.com/docs/components/dialog.md): A modal surface built on top of Spar's headless Dialog primitive. Use it for confirmations, focused forms, and blocking decisions that need full user attention. - [Tooltip](https://takeoff-v2.app.turkishtechlab.com/docs/components/tooltip.md): A floating label that appears on hover or focus to provide contextual information. Built on Spar's headless Tooltip primitive. - [Divider](https://takeoff-v2.app.turkishtechlab.com/docs/components/divider.md): A separator between content sections. Supports horizontal and vertical orientation, line styles, and an optional aligned label. - [Dropdown](https://takeoff-v2.app.turkishtechlab.com/docs/components/dropdown.md): A keyboard-accessible action menu built on Spar's headless DropdownMenu primitive. - [Input](https://takeoff-v2.app.turkishtechlab.com/docs/components/input.md): Accessible text input with compound parts for field, text affixes, icons, and actions. - [Popover](https://takeoff-v2.app.turkishtechlab.com/docs/components/popover.md): A floating panel that appears on click to display additional content or actions. Built on Spar's headless Popover primitive. - [Label](https://takeoff-v2.app.turkishtechlab.com/docs/components/label.md): A lightweight text label for section titles, metadata, and explicit control associations when a full Field layout is not needed. - [Select](https://takeoff-v2.app.turkishtechlab.com/docs/components/select.md): Accessible custom select with controlled / uncontrolled state, keyboard typeahead, and grouped options. - [Radio](https://takeoff-v2.app.turkishtechlab.com/docs/components/radio.md): Lets users choose a single option from a small, mutually exclusive set — ideal for fare classes, seat preferences, and other one-of-many decisions. - [Tabs](https://takeoff-v2.app.turkishtechlab.com/docs/components/tabs.md): Organizes related content into switchable panels while keeping the current task in place. - [Table](https://takeoff-v2.app.turkishtechlab.com/docs/components/table.md): Props-first, TanStack-backed data table — sorting, filtering, selection, expansion, pagination, sticky columns, and a column-def escape hatch. - [Progress](https://takeoff-v2.app.turkishtechlab.com/docs/components/progress.md): Shows how far a task has advanced as a linear bar or a circular ring, with color variants and a disabled state. - [Spinner](https://takeoff-v2.app.turkishtechlab.com/docs/components/spinner.md): A compact loading indicator for indeterminate work. Supports size and color variants while keeping accessibility defaults built in. - [Skeleton](https://takeoff-v2.app.turkishtechlab.com/docs/components/skeleton.md): A decorative loading placeholder that reserves layout while content is being fetched. Supports rectangular and circular shapes with optional shimmer. - [Slider](https://takeoff-v2.app.turkishtechlab.com/docs/components/slider.md): A draggable control for picking a number or a range from a continuous scale. Supports single and two-thumb modes, full keyboard control, and opt-in tick marks. - [Stepper](https://takeoff-v2.app.turkishtechlab.com/docs/components/stepper.md): Guides users through a multi-step flow with indicators, connecting rails, and per-step status. Supports linear progression, compact mode, orientations, and sizes. - [Toast](https://takeoff-v2.app.turkishtechlab.com/docs/components/toast.md): A transient notification system built on the headless Spar toast controller and rendered with Takeoff Alert anatomy. - [Components](https://takeoff-v2.app.turkishtechlab.com/docs/components.md): Browse the documented components available in @takeoff-ui/react-spar. ## Forms - [React Hook Form](https://takeoff-v2.app.turkishtechlab.com/docs/forms/react-hook-form.md): Build Takeoff React Spar forms with React Hook Form, schema validation, and consistent error display. - [TanStack Form](https://takeoff-v2.app.turkishtechlab.com/docs/forms/tanstack-form.md): Build Takeoff React Spar forms with TanStack Form field state, validators, and consistent error display.