OpenCosmos UI (@opencosmos/ui)

OpenCosmos UI is a component library and design system built on Radix UI primitives and Tailwind CSS. 100 accessible components across 11 functional categories, three distinct themes with runtime switching, and a user-controlled motion system — all wired through a 4-layer design token architecture.

Features

• Accessible by default — Built on WAI-ARIA standards via Radix UI. Keyboard navigable, screen reader compatible, WCAG AA contrast.
• Three themes, real personality — Studio (professional), Terra (organic), Volt (electric). Runtime switching via CSS variables, light and dark modes each.
• User-controlled motion — A 0–10 intensity scale that respects prefers-reduced-motion. Intensity 0 works perfectly — no degraded experience.
• Modular imports — Core stays lean. Heavy features (forms, dates, tables, drag-and-drop, WebGL) ship as optional subpath exports — install only what you use.
• Type safe — Written in TypeScript with full type inference. React 19 ref-as-prop pattern throughout.
• Design token system — Colors, typography, spacing, motion, and syntax tokens. Change one primary color, everything updates.

Installation

pnpm add @opencosmos/ui

Sage requires Tailwind CSS as a styling engine:

pnpm add -D tailwindcss@^3.4 postcss autoprefixer

Optional subpath exports

Install peer dependencies only for the features you need:

# Forms (react-hook-form + zod validation)
pnpm add react-hook-form @hookform/resolvers zod

# Date picker
pnpm add react-day-picker date-fns

# Data tables
pnpm add @tanstack/react-table

# Drag and drop
pnpm add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

Configure Tailwind

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@opencosmos/ui/dist/**/*.{js,ts,jsx,tsx}"
  ],
}

Import styles

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

Usage

import { Button, Card, ThemeProvider } from '@opencosmos/ui';

export default function App() {
  return (
    <ThemeProvider theme="studio" defaultMode="system">
      <Card className="max-w-md p-6">
        <h3 className="mb-2 text-lg font-semibold">Welcome to Sage</h3>
        <p className="mb-4 text-muted-foreground">
          Build beautifully with components that feel premium out of the box.
        </p>
        <div className="flex gap-2">
          <Button>Get Started</Button>
          <Button variant="ghost">Documentation</Button>
        </div>
      </Card>
    </ThemeProvider>
  );
}

Subpath imports

import { useMotionPreference, useTheme } from '@opencosmos/ui/hooks'
import { ThemeProvider } from '@opencosmos/ui/providers'
import { cn } from '@opencosmos/ui/utils'

// Optional feature imports
import { Form, FormField } from '@opencosmos/ui/forms'
import { DatePicker } from '@opencosmos/ui/dates'
import { DataTable } from '@opencosmos/ui/tables'
import { SortableList } from '@opencosmos/ui/dnd'

Component categories

Eject — full customization

Need to deeply customize a component? Eject it into your project for full ownership:

npx @opencosmos/ui eject Button
npx @opencosmos/ui eject Dialog --dir components/sage
npx @opencosmos/ui eject --list  # see all available components

This copies the component source into your project with imports automatically rewritten. The ejected component still works with Sage themes and CSS variables — you just own the code now.

You can also eject from opencosmos.ai/studio — every component page has an Eject button that lets you copy or download the source directly.

Bundle size

Core and optional entry points are independently tracked via size-limit:

License

MIT © Shalom Ormsby