open-index/open-npm huggingface dataset:
npm package: @takeoff-ui/core
Description: Core components library designed for Turkish Technology.
Author: Turkish Technology Frontend Infrastructure Team
Latest version: 0.11.0

# @takeoff-ui/core

![Takeoff UI Hero](../../docs/static/img/takeoff-og.jpg)

[![npm version](https://img.shields.io/npm/v/@takeoff-ui/core.svg)](https://www.npmjs.com/package/@takeoff-ui/core)
[![npm downloads](https://img.shields.io/npm/dm/@takeoff-ui/core.svg)](https://www.npmjs.com/package/@takeoff-ui/core)
[![license](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](./LICENSE)

Takeoff UI is a comprehensive design system providing framework-agnostic web
components developed with **Stencil.js**. The system is managed as a monorepo
using **Turborepo**, enabling fast, incremental builds and consistent workflows
across multiple packages for **React**, **Vue**, **Angular**.

## Documentation

Full API reference, guides, and examples are available at
[Documentation Guide](https://takeoff-ui-blond.vercel.app)

## Installation

See our
[Installation Guide](https://takeoff-ui-blond.vercel.app/docs/Installation).

## Contributing

See our
[Contributing Guide](https://takeoff-ui-blond.vercel.app/docs/CONTRIBUTING) for
details on issues, PRs, code style, and more.

## Contributors

<a href="https://github.com/turkishtechnology/takeoff-ui/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=turkishtechnology/takeoff-ui" />
</a>

## License

Licensed under the [Apache 2.0 License](LICENSE).
npm package: @takeoff-ui/react
Description: React components library designed for Turkish Technology.
Author: Turkish Technology Frontend Infrastructure Team
Latest version: 0.11.0

# @takeoff-ui/react

![Takeoff UI Hero](../../docs/static/img/takeoff-og.jpg)

[![npm version](https://img.shields.io/npm/v/@takeoff-ui/react.svg)](https://www.npmjs.com/package/@takeoff-ui/react)
[![npm downloads](https://img.shields.io/npm/dm/@takeoff-ui/react.svg)](https://www.npmjs.com/package/@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](https://takeoff-ui-blond.vercel.app/docs/Introduction)
- Getting started:
  [Installation Guide](https://takeoff-ui-blond.vercel.app/docs/Installation)
- Component APIs and examples:
  [Components Overview](https://takeoff-ui-blond.vercel.app/docs/Components/Overview)

## Installation

```bash
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):

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

2. Import and use React components:

```tsx
// 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](https://takeoff-ui-blond.vercel.app/docs/CONTRIBUTING)

## License

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

## Contributors

<a href="https://github.com/turkishtechnology/takeoff-ui/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=turkishtechnology/takeoff-ui" />
</a>