Using the UI library

Every app builds its interface from @lodekit/ui — the UI library, part of the shared toolchain. Import components like any package:

import { Badge, Button, Card, CardContent, Input } from "@lodekit/ui";

That line is from the Greenhouse showcase app, and it’s the whole setup — no installation, no copy-pasting component files, no configuration.

One theme, one product

The components are shadcn/ui — a widely used, familiar set — carrying one shared theme. Colors, radii, spacing, and typography come from theme tokens, not from each app’s code. That’s why a plant tracker and an invoice tool built months apart look like two views of the same product, and why restyling happens in one place instead of per app.

An app opts in with a single line in its src/index.css:

src/index.css

@import "@lodekit/ui/theme.css";

In Greenhouse, that import is the entire file. It brings in the theme’s tokens and Tailwind setup, so utility classes and semantic colors like text-muted-foreground and text-destructive work everywhere in the app.

Want different colors? Theming is yours, not the app’s — you (or your agent) redefine tokens in a plain CSS file, globally or per app, and every component follows. That’s covered in Theming.

What’s in the box

The set is stock shadcn — Lodekit adds the theme, not custom component internals — plus two composed capabilities with API surface of their own: charts and data tables. The full inventory lives in the components overview; because the components are stock, shadcn’s own docs and examples apply directly, and your agent already knows them well.

See them under your theme

Open a theme in the dashboard’s Themes view: its editor renders a canvas of the components above under that theme, restyling live as you tweak. The dashboard itself is a reference too: what a Button or Card looks like there is exactly what it looks like in your apps, theme overrides included, because they share one theme.

Composing with Tailwind

Components handle the pieces; Tailwind handles the arrangement. Layout, spacing, and one-off tweaks are utility classes right on the components:

src/routes/index.tsx

<Card>
  <CardContent className="flex gap-4 p-4">
    <img
      src={files.url(`cover-${id}`)}
      alt={`${plant.name}'s portrait`}
      className="h-24 w-32 rounded-md object-cover"
    />
    <div className="min-w-0 space-y-1">
      <p className="text-sm text-muted-foreground">{plant.species}</p>
      {snoozed && <Badge variant="secondary">😴 snoozed</Badge>}
    </div>
  </CardContent>
</Card>

That’s the whole building picture: the stack, the anatomy, the data flow, the live updates, and the components. For every handle and signature in one place, head to the SDK reference.