@takeoff-ui/react

React bindings for the Takeoff UI Design System. This package exposes React components that wrap the framework‑agnostic web components in @takeoff-ui/core (built with Stencil.js), giving you a smooth React developer experience.

Documentation

• Full docs: Introduction
• Getting started: Installation Guide
• Component APIs and examples: Components Overview

Installation

npm install @takeoff-ui/react
# or
pnpm add @takeoff-ui/react
# or
yarn add @takeoff-ui/react

Quick Start

1. Import the global styles from the core package (once at app startup):

// e.g. src/main.tsx or src/index.tsx
import '@takeoff-ui/core/dist/core/core.css';

2. Import and use React components:

// App.tsx
import { TkButton, TkInput } from '@takeoff-ui/react';
import { useState } from 'react';

export default function App() {
  const [value, setValue] = useState('');

  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <TkButton variant="primary">Click me</TkButton>

      <TkInput
        value={value}
        onTkChange={(ev) => {
          // Stencil events emit CustomEvent with detail payload
          const next = (ev as CustomEvent<any>).detail?.value ?? '';
          setValue(next);
        }}
        placeholder="Type here..."
      />
    </div>
  );
}

Features

• React wrappers for all Takeoff UI components (e.g., TkButton, TkInput, TkDialog, ...)
• Full TypeScript support and JSX props
• Event handlers mapped to React-style props (e.g., onTkChange)
• Works with Create React App, Vite, Next.js, and other React setups

Contributing

We welcome contributions! Please read the guide for details on issues, PRs, and coding standards.

• Contribution guide

License

Licensed under the Apache 2.0 License. See the repository root LICENSE file.

Contributors