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-SparSparTakeoff 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>
  );
}