UI primitives

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

pnpm dlx shadcn@latest add button dialog

Then import them from the shared ui package:

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

AnatomyCopy Anchor Link

Base UI components compose through the render prop. Pass another element to swap the underlying tag, for example to 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" />

ThemingCopy Anchor Link

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