@strait/ui

Strait's design system — 120+ accessible, composable React components built on Tailwind CSS v4 and Base UI, themeable through a single stylesheet and shipped as one tree-shakeable module per component.

📖 Docs & live previews: the Strait UI documentation site (Next.js + Fumadocs), deployed on Vercel. 🤖 For LLMs: llms.txt · llms-full.txt (also published inside this package).

Install

bun add @strait/ui
# react and react-dom 19 are required peer dependencies
bun add react react-dom

Quick start

Import the stylesheet once at the root of your app — it bundles Tailwind v4, the design tokens, and component keyframes:

// app entry (e.g. app/layout.tsx, main.tsx)
import "@strait/ui/css";

Then import only the components you use. Each has its own subpath export, so your bundle only ever includes what you import:

import { Badge } from "@strait/ui/components/badge";
import { Button } from "@strait/ui/components/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@strait/ui/components/card";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Deployments</CardTitle>
      </CardHeader>
      <CardContent className="flex items-center gap-2">
        <Badge variant="success">Live</Badge>
        <Button>Open</Button>
      </CardContent>
    </Card>
  );
}

Dark mode

Tokens flip on a .dark class on any ancestor (@custom-variant dark (&:is(.dark *))). Toggle it however you like — next-themes is the recommended driver:

import { ThemeProvider } from "next-themes";

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>;

Tailwind & PostCSS config

To consume the same tokens in your own Tailwind setup, the package exports its config and PostCSS setup:

// @strait/ui/tailwind.config  — the shared Tailwind config
// @strait/ui/postcss          — the shared PostCSS config
// @strait/ui/css              — the prebuilt global stylesheet

Highlights

• Per-component entry points — @strait/ui/components/<name>; nothing you don't import ends up in your bundle.
• Semantic tokens everywhere — components style themselves with intent tokens (bg-success/10, text-destructive-accent, var(--chart-1..5)), so re-theming is a tokens-only change and dark mode comes for free.
• One-token rebrand — set --brand to any color and the foreground, soft/outline accent, chart, and sidebar tokens derive from it automatically (light + dark).
• Composable by default — every component forwards className, exposes data-slot sub-parts, and uses Base UI's polymorphic render prop where an element needs to change.
• Typed end to end — React 19, TypeScript, and named Props types for every component.
• Published from CI with provenance via npm trusted publishing.

Documentation

The full component catalog, props, variants, and live examples live on the documentation site (Next.js + Fumadocs, deployed on Vercel).

License

MIT © Strait