UI Primitives

Zeno's primitives are the shadcn components, built on Base UI and styled with Tailwind CSS. Go to the shadcn components page to browse the full catalog and add any of them with the CLI:

pnpm dlx shadcn@latest add button dialog

Once added, you can import them like so:

import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"

Anatomy

• Composition via Base UI's render prop: pass another element to swap the underlying tag (e.g. render a Button as a Next.js Link)

import Link from "next/link"
import { Button } from "@/components/ui/button"

<Button render={<Link href="/recover">Recover</Link>} variant="link" />

Theming

See Theming to add Zeno's design tokens, dark mode, and overrides.