@kotaio/ui

Kota's design system: a collection of reusable React components built on Radix UI primitives and Tailwind CSS v4, following best practices for accessibility and performance.

Installation

npm install @kotaio/ui
# or
pnpm add @kotaio/ui

Peer requirements:

• react >= 19
• react-dom >= 19
• tailwindcss >= 4

Setup

Import the design system stylesheet in your app's global CSS file (the one processed by Tailwind):

@import '@kotaio/ui/globals.css';

That single import brings in Tailwind itself, the Kota theme (colors, typography, radii, animations), the Inter and Faktum Neue fonts, and registers the component files with Tailwind so all required utility classes are generated.

If your app defines its own Tailwind theme, make sure this import comes first so you can override tokens afterwards.

Usage

import { Button, Card, CardContent, Dialog, Icon } from '@kotaio/ui';

export function Example() {
  return (
    <Card>
      <CardContent>
        <Button>
          <Icon name="check" size="sm" />
          Save changes
        </Button>
      </CardContent>
    </Card>
  );
}

The cn class-merging helper (clsx + tailwind-merge) is available from @kotaio/ui/lib/utils:

import { cn } from '@kotaio/ui/lib/utils';

Development (inside the Kota monorepo)

Structure

• src/components/ui contains mostly components from shadcn/ui
• src/components - contains internal components fully built by Kota

Building

cd pkgs/ui
pnpm build # compiles to dist/ (ESM + type declarations + assets)

Storybook

cd pkgs/ui
pnpm storybook

Adding New SVG Icons

To add new SVG icons to the component library, use the convenient add-icon script:

Important: Make sure you are in the pkgs/ui directory before running the command.

cd pkgs/ui
pnpm add-icon icon-name-1 [icon-name-2] [icon-name-3] ...

Examples

# Add a single icon
pnpm add-icon pencil-simple-line-bold

# Add multiple icons at once
pnpm add-icon user-circle-plus envelope-simple check-circle

This script will:

• Download the specified icon(s) from the phosphor-icons collection
• Add them to the ./svgs directory
• Overwrite any existing files with the same name
• Automatically confirm the operation without prompting
• Provide clear feedback on success/failure for each icon

Manual Method (Alternative)

If you prefer to use the Sly CLI directly:

cd pkgs/ui
pnpm dlx @sly-cli/sly add iconify:ph icon-name --overwrite --yes --directory ./svgs/

Releasing

Releases are automated with Changesets. When your change should be published, add a changeset alongside it:

pnpm changeset

Merging to main opens (or updates) a "Version Packages" PR; merging that PR publishes to npm.

License

Apache-2.0