CHANGELOGRelease notes, shipped components, and notable updates →

The React surfacefor the Takeoffdesign system.

@takeoff-ui/react-spar brings Spar primitives, Takeoff design tokens, and a stable compound API together in one React 19 library. It is built to theme cleanly, compose predictably, and stay understandable as the component set grows.

Get started Support on GitHub

$pnpm add @takeoff-ui/react-spar

Compound: API model
React 19: Baseline
Tokens: Theme layer
Apache-2.0: License

Documentation

Core components,
shipped with the full contract.

Every preview below is the real component, rendered live from @takeoff-ui/react-spar — Button, Input, Badge, Switch, Alert, and the TanStack-backed Table. Nothing ships without docs, examples, and API coverage in place.

Buttons

Button

Input

Badge

Switch

Alert

Table

Browse the full component set

Why teams choose it

A small surface with a strong contract.

The promise is not “everything for everyone.” It is a narrower, more durable guarantee: React 19 only, compound composition, token-driven styling, and customization that stays additive over time.

01 / Token contract

Design tokens stay in charge

Color, spacing, radius, and elevation all resolve from @takeoff-design/tokens. Rebrand and theme at the token layer instead of patching components one by one.

02 / API shape

Structure where structure is real

Roots own state, named parts own content and layout. That keeps the surface close to the rendered anatomy and avoids convenience props that drift over time.

03 / Accessibility

A11Y is preserved in the wrapper

ARIA wiring, keyboard behavior, focus management, and reduced-motion expectations come from Spar primitives and remain intact in the React layer.

04 / TypeScript

Types match the docs

Props, slot names, and documented data-* hooks are typed from the same public surface these docs describe, so autocomplete reflects the contract instead of tribal knowledge.

05 / React baseline

One modern support target

The library targets React 19 on purpose. Peer dependencies, examples, and documentation all align around the same baseline instead of splitting across legacy branches.

06 / Theming

Customization stays additive

Components read CSS custom properties and expose classNames and slotProps where customization is expected. You extend the surface without replacing the owner nodes it depends on.

One system, three entry points

React ergonomics.
System-level consistency.

Same design system, three surfaces. @turkish-technology/spar is the headless core, Takeoff UI Core ships framework-agnostic web components, and @takeoff-ui/react-spar is the typed React wrapper — pick the layer that fits your stack.

React-SparSpar Takeoff UI Core

FareDetails.tsx

TSX

// React wrapper — typed props, variants, theming defaults.
import { Accordion } from '@takeoff-ui/react-spar';

export function FareDetails() {
  return (
    <Accordion defaultValue="baggage">
      <Accordion.Item value="baggage">
        <Accordion.Header>
          <Accordion.Trigger>Baggage allowance</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Cabin and checked bag limits per fare family.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Product philosophy

Three principles keep the API predictable.

These are the rules behind every shipped surface in the library. They explain why the API reads consistently, why styling hooks stay stable, and why customization does not turn into migration debt later.

Principle 01

Shape it.

Components expose structure where structure is real, not where a convenience prop would be easier to add.

Principle 02

Align it.

React surfaces stay aligned with Takeoff UI Core on the contracts consumers actually depend on: state, slots, and styling hooks.

Principle 03

Extend it.

React-only enhancements stay additive, so customization never breaks the owner nodes and selectors the system relies on.

Installation

Install once. Theme from the root.

Install the React package with the token package, import one theme file, and wrap your app once. Spar primitives are pulled in by the React package unless you import them directly.

01Install

$pnpm add @takeoff-ui/react-spar @takeoff-design/tokens

02Import tokensapp entry

import '@takeoff-design/tokens/css/default/theme.css';

03Wrap the approot.tsx

import { TakeoffSparProvider } from '@takeoff-ui/react-spar';import '@takeoff-design/tokens/css/default/theme.css'; export function App({ children }) {  return (    <TakeoffSparProvider colorMode="light">      {children}    </TakeoffSparProvider>  );}

TypeScript, end to end

The types and the docs describe the same surface.

Variants, slot names, and component overrides resolve from the public API itself. That means autocomplete follows the documented contract instead of a parallel, accidental type layer.

Apache-2.0 licensed · React 19 · public docs

A stable surface to build on.

Installation guides, component references, philosophy notes, migration paths, and changelog all point at the same contract. That alignment is what makes the library usable in real product work.

Get started Browse components