Introduction

COSM UI Kit (@cosm/ui) is a React component library for the COSM Lab design system. Distributed as an npm package, ready to use across lab projects.

What's included

• 60+ components — buttons, forms, dialogs, tables, navigation, notifications, and more
• Accessible — built on Radix UI primitives with keyboard navigation and ARIA support
• Dark mode — built-in light and dark theme support via CSS custom properties in oklch
• Tailwind CSS v4 — utility-first styling with design tokens
• TypeScript — full type coverage for all components and props

Installation

See the Installation page for setup instructions.

Usage

Copyimport { Button } from "@cosm/ui/button"
import { Dialog, DialogContent, DialogTrigger } from "@cosm/ui/dialog"
 
export function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open</Button>
      </DialogTrigger>
      <DialogContent>
        <p>Dialog content</p>
      </DialogContent>
    </Dialog>
  )
}

All components are imported directly from @cosm/ui/<component>. For the full list of available components, see the Components section.

Foundation

COSM UI Kit is built on shadcn/ui (new-york style) and shares the same architecture:

• Radix UI — headless primitives for accessible components
• Tailwind CSS — utility-first styling
• class-variance-authority — component variant management
• tailwind-merge — smart class merging via cn()

Components are adapted for the COSM Lab design system: color tokens are overridden, custom components are added (Spinner, Empty, Field, Item, Kbd, and others), and existing component variants are extended.