nocturne-react

React components for the Nocturne design system. Thin, typed wrappers over the framework-agnostic nocturne-css classes, they add no styling of their own, so the CSS stays the single source of truth.

Install

pnpm add nocturne-react nocturne-css react react-dom

Use

Import the stylesheet once at your app root, then use the components:

import "nocturne-css";
import { Button, Card, Badge, Alert } from "nocturne-react";

export default function App() {
  return (
    <Card title="Uplink" accent="cyan" right={<Badge tone="green">online</Badge>}>
      <Alert tone="info" title="Sync complete">42 sessions indexed.</Alert>
      <Button variant="primary">Jack in</Button>
    </Card>
  );
}

Components

Button Badge Card Panel Alert Input Textarea Select Checkbox Field Label Tabs Progress StatTile Divider Disclosure TaskChip SectionHeader TopBar Skeleton Dot, plus the cn helper.

All props are typed and forwarded to the underlying element. Components using state (Tabs) are client components ("use client").

Apache-2.0.