Installation

Eidos is published to npm as @kairosis/eidos. It is public, so no registry configuration or token is needed.

npm install @kairosis/eidos

react and react-dom are peer dependencies (18 or 19). lucide-react ships as a dependency — it backs the Icon component.

Import the stylesheet

Once, at your app's entry point. Without it, components render unstyled — every value they use is a CSS custom property.

import "@kairosis/eidos/styles.css";

That single file carries both the design tokens and the component styles.

Render something

import { Button, Card, Badge } from "@kairosis/eidos";

export function Overview() {
  return (
    <Card
      title="api-gateway"
      action={
        <Badge tone="success" dot>
          Healthy
        </Badge>
      }
    >
      <Button icon="plus">Create project</Button>
    </Card>
  );
}

The whole frame

AppShell gives you the application layout — a fixed nav column, a fixed top bar, and a scrolling content region:

import { AppShell, Sidebar } from "@kairosis/eidos";

<AppShell
  sidebar={<Sidebar sections={sections} activeItem={active} onSelect={setActive} />}
  header={<Toolbar />}
>
  <RunsPage />
</AppShell>;

It's worth using rather than hand-rolling: Sidebar is height: 100% and silently collapses without a sized flex parent, and the content column needs min-width: 0 or one wide DataTable shoves the whole page sideways instead of scrolling in its own region.

What's in the package

Export	What it is
@kairosis/eidos	The components, useTheme, and tag-colour utils
@kairosis/eidos/styles.css	Tokens and component styles — the usual one
@kairosis/eidos/tokens.css	Just the custom properties, no component styles
@kairosis/eidos/tailwind.css	The Tailwind v4 theme (see Tailwind)

Icons

Icon wraps Lucide and takes a kebab-case name:

<Icon name="git-branch" size={16} />
<Button icon="plus">Create project</Button>

Use Lucide's current names — several were renamed. circle-check, not check-circle-2. triangle-alert, not alert-triangle. house, not home. An unknown name renders nothing and warns in development.

Names resolve against Lucide's icon map at runtime, so the whole set is available with no extra imports. The trade-off is that bundlers can't tree-shake unused glyphs — if icon payload matters more to you than the string API, import Lucide components directly instead.