@kolkrabbi/kol-component

The KOL design-system component library — atoms through organisms. Components emit canonical kol-* classes; their styling lives in @kolkrabbi/kol-theme.

Install

npm i @kolkrabbi/kol-component @kolkrabbi/kol-theme
# react, react-dom are peers; react-router-dom is an optional peer (some components)

Requires a Vite + Tailwind v4 app and the theme CSS imported (see the theme package).

Tailwind v4 consumers

Tailwind skips node_modules when scanning, so point it at this package's source — otherwise the utility classes inside the components never generate and layouts collapse:

@source "../node_modules/@kolkrabbi/kol-component/src";

Use

import { Button, Tag, Badge, Slider, Dropdown, Table } from '@kolkrabbi/kol-component'
import { Icon } from '@kolkrabbi/kol-icons'

<Button variant="primary" iconLeft="plus">New</Button>
<Badge variant="success">Active</Badge>

Atoms (Button, Input, Slider, Toggle*, …), molecules (Dropdown, Tag, Badge, Modal, Popover, …), primitives (Accordion, Carousel, CodeBlock, Image, …), an organism (Table), graphics, and hooks (useReveal, useScrollSpy). See the usage reference for real examples of each.