Lantern Fire · Design system
A design system for Lantern products.
Components, design guidelines, and tooling for Lantern's design system — packaged as @lantern-product/ui.
v0.4.0 · @lantern-product/ui on npm
Why Lantern Fire
Everything you need to ship a polished interface, none of the bikeshedding.
A shared design language for every Lantern product. Consume it as @lantern-product/ui, override what you need, and stay in sync as the system evolves.
Quick start
Drop it into any React 18.3+ app.
Published publicly on npmjs.com — no authentication required. Install the package, import the design tokens once, and start using primitives. Tailwind v4 picks up the workspace source automatically — no codegen, no build steps.
Tailwind CSS v4shadcn/ui radix-novaReact 19TypeScript 5OKLCH tokenslucide-react
1. Install
npm install @lantern-product/ui2. Import tokens
/* app/globals.css */
@import "@lantern-product/ui/styles";
/* Monorepo? Tell Tailwind to scan the package source: */
@source "../../../node_modules/@lantern-product/ui/dist";3. Use components
import { Button, Card, cn } from "@lantern-product/ui";
export function Example() {
return <Button>Click me</Button>;
}Ready to light it up?
Start with the components, dial in your theme via tokens, and ship a cohesive interface across every Lantern product.