UI Primitives

Zeno ships a set of unstyled-but-themed React primitives in the @zeno-lib/ui package. They mirror shadcn/ui 1:1 in API and naming and are built on top of Base UI.

import { Button } from "@zeno-lib/ui/button"
import { Dialog, DialogContent, DialogTrigger } from "@zeno-lib/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 "@zeno-lib/ui/button"

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

Theming

Add one import to your app's global stylesheet, depending on what you need:

All styles (recommended for most apps) — base styles, animations, and design tokens:

@import "@zeno-lib/ui/styles/globals.css";

Design tokens only — if you already have your own Tailwind setup and just need Zeno's color, radius, and spacing variables:

@import "@zeno-lib/ui/styles/theme.css";

See Theming for token overrides and dark mode.

Examples

Button

Card

Form field

Alert

Accordion

Badge

Component index

Layout

• Aspect Ratio — @zeno-lib/ui/aspect-ratio
• Card — @zeno-lib/ui/card
• Resizable — @zeno-lib/ui/resizable
• Scroll Area — @zeno-lib/ui/scroll-area
• Separator — @zeno-lib/ui/separator
• Sidebar — @zeno-lib/ui/sidebar

Forms

• Button — @zeno-lib/ui/button
• Button Group — @zeno-lib/ui/button-group
• Checkbox — @zeno-lib/ui/checkbox
• Field — @zeno-lib/ui/field
• Input — @zeno-lib/ui/input
• Input Group — @zeno-lib/ui/input-group
• Input OTP — @zeno-lib/ui/input-otp
• Label — @zeno-lib/ui/label
• Radio Group — @zeno-lib/ui/radio-group
• Select — @zeno-lib/ui/select
• Slider — @zeno-lib/ui/slider
• Switch — @zeno-lib/ui/switch
• Textarea — @zeno-lib/ui/textarea
• Toggle — @zeno-lib/ui/toggle
• Toggle Group — @zeno-lib/ui/toggle-group
• Native Select — @zeno-lib/ui/native-select. shadcn doesn't ship a native variant; reach for it when you want the OS-level picker, otherwise use Select.

Navigation

• Breadcrumb — @zeno-lib/ui/breadcrumb
• Menubar — @zeno-lib/ui/menubar
• Navigation Menu — @zeno-lib/ui/navigation-menu
• Pagination — @zeno-lib/ui/pagination
• Tabs — @zeno-lib/ui/tabs

Overlays

• Alert Dialog — @zeno-lib/ui/alert-dialog
• Context Menu — @zeno-lib/ui/context-menu
• Dialog — @zeno-lib/ui/dialog
• Drawer — @zeno-lib/ui/drawer
• Dropdown Menu — @zeno-lib/ui/dropdown-menu
• Hover Card — @zeno-lib/ui/hover-card
• Popover — @zeno-lib/ui/popover
• Sheet — @zeno-lib/ui/sheet
• Tooltip — @zeno-lib/ui/tooltip

Data display

• Accordion — @zeno-lib/ui/accordion
• Avatar — @zeno-lib/ui/avatar
• Badge — @zeno-lib/ui/badge
• Calendar — @zeno-lib/ui/calendar
• Carousel — @zeno-lib/ui/carousel
• Chart — @zeno-lib/ui/chart
• Collapsible — @zeno-lib/ui/collapsible
• Empty — @zeno-lib/ui/empty
• Item — @zeno-lib/ui/item
• Kbd — @zeno-lib/ui/kbd
• Table — @zeno-lib/ui/table

Feedback

• Alert — @zeno-lib/ui/alert
• Progress — @zeno-lib/ui/progress
• Skeleton — @zeno-lib/ui/skeleton
• Sonner — @zeno-lib/ui/sonner
• Spinner — @zeno-lib/ui/spinner

Commands & search

• Combobox — @zeno-lib/ui/combobox
• Command — @zeno-lib/ui/command

Utilities

• Direction — @zeno-lib/ui/direction. No shadcn equivalent; see the Base UI direction-provider docs.