Refined UI components with satisfying hover. Built on shadcn/ui and Base UI primitives — every transition exists to make a state change legible.
Live docs & demos | Browse components
Initialize shadcn in a project that does not already have a components.json:
npx zeron-ui initInstall one or more components:
npx zeron-ui add button
npx zeron-ui add button dialog popoverThe Zeron CLI installs from the live Registry and delegates file placement, dependencies, CSS, and design tokens to a pinned shadcn installation engine. To inspect the catalog or preview a component without writing files:
npx zeron-ui list
npx zeron-ui add button --dry-runThe Registry remains directly compatible with shadcn as a fallback:
npx shadcn@latest add https://zeron-ui.vercel.app/r/button.jsonDependencies resolve automatically. Font weight animations require the Inter variable font.
Components render icons through named slots with HugeIcons Stroke Rounded defaults. To use another icon library, wrap your app in the installed IconProvider and override any slot; names you leave out keep their HugeIcons default:
import { IconProvider } from "@/lib/icon-context";
import { CaretRight, MagnifyingGlass } from "@phosphor-icons/react";
<IconProvider icons={{ "chevron-right": CaretRight, "search": MagnifyingGlass }}>
<App />
</IconProvider>The site and default Registry components use only the public HugeIcons packages, so installs and builds do not require a license token. The optional pro-icon-provider Registry item adds HugeIcons Stroke Standard, Bulk Rounded, and Duotone Rounded. It requires a HugeIcons Pro subscription and is intentionally excluded from the site's dependency graph.
To opt in, copy the local registry configuration, provide your own token, install the Registry item, and use ProIconProvider at the app root. Keep .npmrc local; it is ignored by Git. Pro icon definitions are never included in this Registry.
cp .npmrc.example .npmrc
export HUGEICONS_TOKEN="your-token"
npx zeron-ui add pro-icon-providerimport { ProIconProvider } from "@/lib/pro-icon-provider";
<ProIconProvider>
<App />
</ProIconProvider>| Component | Description |
|---|---|
| Accordion | Collapsible sections with animated expand/collapse and proximity hover |
| AskUserQuestions | Stepped question flow with single/multi-select, inline "other" input, and multi-question navigation |
| Badge | Compact label with solid and dot variants, Tailwind color palette |
| BadgeOverflow | Responsive badge list that collapses hidden items into an overflow count |
| Breadcrumb | Composable path navigation with separators, current-page state, and collapsed levels |
| Button | Variants, sizes, loading state, and icon support |
| Card | One prop-driven card — stacked, inline, or grid layouts, borderless dividers, media/logo/feature slots, and 2-D proximity hover |
| Checkbox | Compact checkbox with checked, mixed, disabled, validation, and form states |
| CheckboxGroup | Merged backgrounds for contiguous selections |
| ColorPicker | HEX, RGB, HSL, and OKLCH formats with alpha, swatches, and eyedropper; inline or popover |
| DataGrid | Virtualized spreadsheet grid with inline editing, range selection, search, copy and paste, and pinned columns |
| DataTable | TanStack data table with sorting, filters, pagination, selection, visibility, and pinning |
| Dialog | Modal with smooth enter/exit animations and overlay |
| Dropdown | Menu-style dropdown with proximity hover |
| Input | Text input with three variants, five sizes, and accessible validation states |
| InputCopy | Read-only input with copy-to-clipboard and animated feedback |
| InputGroup | Composable input with addons, compact actions, textarea support, and validation |
| Kbd | Compact keycaps and shortcut groups for keyboard commands and interaction hints |
| InputMessage | Chat-style composer with auto-resizing textarea, action slots, and built-in send button |
| Popover | Collision-aware floating content with a liquid anchor-to-panel transition |
| RadioGroup | Composable radio controls with form support and enhanced proximity-hover rows |
| Select | Animated select with bordered/borderless variants |
| Slider | Range slider with step snapping, range mode, animated thumb |
| Stepper | Multi-step navigation with validation, completion states, and keyboard controls |
| Surfaces | Semantic elevation roles with relative nesting so popovers, dropdowns, and dialogs stay distinct at any depth |
| Switch | Toggle with animated thumb and label |
| Table | Data table with row hover effects |
| Tabs | Pill, segment, and underline tabs with sliding indicators and proximity hover |
| ThinkingIndicator | Animated status indicator with morphing SVG |
| ThinkingSteps | Chain-of-thought display with sequential animation |
| Tooltip | Spring-based floating tooltip with configurable placement |
- Motion as information — transitions make state changes legible, nothing moves for decoration
- Hover as preview — proximity highlights show where your action will land before you click
- Spring physics — springs replace fixed durations, adapting naturally to interruption
- Drop-in compatible — your existing shadcn theme and tokens apply automatically
- Next.js 15 + React 19
- Tailwind CSS v4
- Framer Motion
- Base UI primitives
- shadcn/ui registry protocol
MIT © Zeron Design