Nocturne styleguide hero: near-black surface with neon yellow accent

What it is

Nocturne ships as three layers so you take exactly what you need: nocturne-tokens (colors, type, spacing, radii, shadows and motion as CSS variables, SCSS, JSON and typed JS), nocturne-css (class-based components that work in plain HTML with no build step) and nocturne-react (thin, typed React wrappers over the CSS classes). Use the tokens alone, drop the CSS into any stack (Vue, Svelte, Astro, plain HTML), or pull the React components. Same visual language either way.

Nocturne component gallery: buttons, badges, cards and panels

Quick install

Plain HTML, framework-agnostic:

<link rel="stylesheet" href="https://unpkg.com/nocturne-css/dist/nocturne.css" />

<body class="noct-root noct-bg-wash noct-scanlines">
  <button class="noct-btn noct-btn--primary">Jack in</button>
</body>

React:

pnpm add nocturne-react nocturne-css

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

export default function App() {
  return (
    <Card title="Uplink" accent="cyan" right={<Badge tone="green">online</Badge>}>
      <Button variant="primary">Jack in</Button>
    </Card>
  );
}

Just the tokens:

@import "nocturne-tokens/css";

.thing {
  color: var(--noct-primary);
  border: 1px solid var(--noct-border);
}

Key features

40+ components: buttons, cards, modals, drawers, toasts, tables, tabs, command palette and more.
Every component exists both as a CSS class API and a React component.
Zero JavaScript runtime for the CSS layer; the live styleguide runs with no build at all.
Design tokens in CSS variables, SCSS, JSON and typed TypeScript.
Brand guidelines, voice and tone, and an accessibility contrast table included.
Ported from NocturneOS, so the language is battle-tested in a real interface.

Stack & status

Plain CSS and TypeScript, React wrappers, Storybook for development. Apache 2.0 licensed. Active. The live styleguide is published from the repo at starside-io.github.io/nocturne.