npm package: @kdsui/components
Description: React component library — buttons, inputs, modals, pagination, and more. Built with Radix UI + Tailwind CSS.
Latest version: 1.1.3

# @kdsui/components

React component library built with [Radix UI](https://www.radix-ui.com/) primitives and [Tailwind CSS](https://tailwindcss.com/).

29 accessible, typed components: buttons, inputs, modals, pagination, radio groups, selects, tabs, tooltips, and more.

## Installation

```bash
npm install @kdsui/components
```

**Peer dependencies** (required):

```bash
npm install react react-dom
```

## Usage

```tsx
import { AppButton, AppInput, AppModal } from "@kdsui/components";
import "@kdsui/components/styles";

export function MyForm() {
  return (
    <div>
      <AppInput label="Email" placeholder="you@example.com" fullWidth />
      <AppButton variant="primary" usage="cta">
        Submit
      </AppButton>
    </div>
  );
}
```

## Components

| Category | Components                                                                                                                                                          |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Actions  | `AppButton`                                                                                                                                                         |
| Form     | `AppInput`, `AppTextarea`, `AppSelect`, `AppCheckbox`, `AppCheckboxGroup`, `AppRadio`, `AppRadioGroup`, `AppSwitch`, `AppQuantityInput`, `AppTagInput`, `AppUpload` |
| Display  | `AppBadge`, `AppTag`, `AppTable`, `AppTabs`, `AppPagination`, `AppSeparator`                                                                                        |
| Feedback | `AppMessage`, `AppCallout`, `AppModal`, `AppTooltip`, `AppLoadingIcon`                                                                                              |
| Branding | `AppIcon` (571 icons), `AppIconWallet`, `AppLabel`                                                                                                                  |

## Development

```bash
# Storybook dev server (port 6006)
npm run dev

# Build library
npm run build

# Run tests
npm run test
npm run test:watch
npm run test:coverage

# Lint & format
npm run lint
npm run lintfix
npm run lint:prettier

# Type check
npm run typecheck
```

**Node version**: 20.20.0 (Volta-managed)

## Tech Stack

| Tool              | Purpose                                                                        |
| ----------------- | ------------------------------------------------------------------------------ |
| React 18/19       | UI framework                                                                   |
| TypeScript        | Type safety                                                                    |
| Radix UI          | Accessible primitives (checkbox, dialog, radio, select, switch, tabs, tooltip) |
| Tailwind CSS      | Styling                                                                        |
| Vite              | Build (ES module output)                                                       |
| Storybook         | Component documentation                                                        |
| Vitest            | Unit tests                                                                     |
| ESLint + Prettier | Code quality                                                                   |

## Conventions

- **Conventional commits** enforced via Husky + Commitlint
- **Lint-staged** runs ESLint + Prettier on pre-commit
- **Semantic versioning** via semantic-release (automated on `main` branch)

### Commit format

```
type(scope): description

# Examples:
feat(pagination): add previousLabel/nextLabel props
fix(button): prevent fullWidth stretch in flex containers
docs: update README
```

Types: `feat` (minor), `fix` (patch), `docs`, `style`, `refactor`, `test`, `chore`.

## Build Output

- ES module (`dist/index.js`)
- Type declarations (`dist/types/`)
- Bundled CSS (no code split)

## License

MIT