Skip to main content

Eidos

A React component library for dense, technical product UI — dev tools, data-heavy dashboards, and clean SaaS surfaces. Dark theme is the default; light is a first-class variant.

46 components, TypeScript throughout, CSS Modules over a Style Dictionary token pipeline.

import { AppShell, Sidebar, Card, Stat, Badge } from "@kairosis/eidos";
import "@kairosis/eidos/styles.css";

<AppShell sidebar={<Sidebar sections={sections} />}>
  <Card
    title="api-gateway"
    action={
      <Badge tone="success" dot>
        Healthy
      </Badge>
    }
  >
    <Stat label="Runs today" value="1,284" delta="+12% vs last week" deltaTone="positive" />
  </Card>
</AppShell>;

What it's for​

Interfaces with a lot on screen: run tables, log panels, resource trees, dashboards. The design leans dense but breathable — 36px controls, a 4px grid, soft 6–10px radii, and borders rather than shadows to define structure.

Principles​

Dark is the default. Light is a real variant, not an afterthought — both draw from one neutral ramp, inverted, so they can't drift apart.

Data is mono. Timestamps, IDs, counts and durations are always Geist Mono with tabular figures, so digits line up and a ticking number doesn't jitter.

Colour means something, or nothing at all. Badge is semantic — the colour carries status. TagChip is not — its colour is a stable hash of the label, assigned by index, and means nothing. Never encode meaning in colour alone.

One primary action per view. One orange "current" marker per view, too.

Motion is fast and functional. 120ms hovers, 180ms dropdowns, 260ms dialogs. Fades and a 4px translate. No bounces, no springs, no scale transforms.

Where to go next​

  • Installation — install, import the stylesheet, render something.
  • Theming — data-theme, the useTheme hook, and killing the flash of wrong theme.
  • Design tokens — the two-layer token pipeline and how to override it.
  • Tailwind — the generated v4 theme.
  • Accessibility — what's guaranteed, and what's tested.
  • Components — the full reference.
  • Storybook — every variant, with live controls.