Getting started

Installation

Install the package, set up Tailwind v4, and render your first component.

1. Install the package

pnpm add @kana-consultant/ui-kit
# or
npm install @kana-consultant/ui-kit
# or
yarn add @kana-consultant/ui-kit

2. Peer dependencies

The kit expects React 18+ or 19+ in your app. Install it if you don't have it yet.

pnpm add react react-dom

Everything else (Radix UI, TanStack Form / Store, clsx, class-variance-authority, lucide-react, tailwind-merge, zod) installs automatically as transitive runtime dependencies.

3. Tailwind CSS v4

If your project doesn't have Tailwind v4 yet:

pnpm add -D tailwindcss @tailwindcss/vite

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

4. Import the styles

In your app's entry stylesheet, import Tailwind and the kit's design tokens:

src/styles/app.css

@import 'tailwindcss';
@import '@kana-consultant/ui-kit/styles';

5. Render a component

src/app.tsx

import { Button, Card } from '@kana-consultant/ui-kit'

export function App() {
  return (
    <Card className="p-6">
      <Button>Ship it</Button>
    </Card>
  )
}