Composable primitives
Build layouts from small pieces with predictable props and clear defaults.
A highly customizable component + hooks library built with Tailwind CSS and Framer Motion, focused on subtle interactions and a cohesive dark aesthetic. Use interactive previews and typed hooks to assemble production layouts without reinventing primitives.
Why this library
Opinionated visuals with escape hatches—fast to scan, fast to ship.
Build layouts from small pieces with predictable props and clear defaults.
Glass, solid, outline, and gradient families across buttons, inputs, and overlays.
Optional animated entry points for modals, tabs, and toasts powered by Framer Motion.
Headless utilities for storage, debouncing, media queries, and focus management.
Import only what you need from `@zentauri-ui/zentauri-components/ui/...` bundles.
Typed APIs and variant props so refactors stay safe as your design system grows.
Live previews
Toggle Preview and Code—snippets mirror real props from the package.
Headless hooks
Typed helpers for storage, timing, gestures, and layout—each with an interactive preview route.
JSON-serialized state mirrored to localStorage with cross-tab storage events.
Use case: Persists UI preferences, draft forms, or lightweight client caches across sessions.
Returns a value that updates only after the source has been stable for a delay.
Use case: Ideal for search-as-you-type, autosuggest, and expensive effects tied to fast-changing inputs.
Listens for pointer or touch events outside a ref element and closes floating UI.
Use case: Pairs with menus, popovers, and pickers so a single ref boundary defines “inside” versus dismiss.
Subscribes to window.matchMedia and updates when the query result changes.
Use case: Branch layouts, feature flags, or responsive behavior from any valid media query string.
Composition
Inputs, overlays, and feedback primitives combine without custom glue code.
Controlled fields with inline validation messaging.
Badge + progress readout for health or rollout metrics.
99.2%
Scoped surface
Preview panel
This toggle only affects this box—your app controls global theme via Tailwind dark: variants or layout-level classes.
See Installation for globals, @source scanning, and theme overrides.
Developer experience
Familiar tooling, predictable exports, and previews that mirror what you import in production.
Docs and previews follow patterns that drop into `app/` routes without extra wrappers.
Typed variant APIsCVA-backed appearances and sizes stay consistent across components.
Modular import pathsImport from `@zentauri-ui/zentauri-components/ui/<family>` to keep bundles lean.
CLI init & addBootstrap or extend a project with pnpm dlx @zentauri-ui/zentauri-components init and scoped adds.
Hooks alongside UIUse the same package for primitives and browser utilities with matching docs.
Install
Pick your package manager, copy the command, then follow the full Tailwind v4 setup on the installation page.
npm install @zentauri-ui/zentauri-componentsScaffold or add components into your repo with the published CLI.
npx @zentauri-ui/zentauri-components initTheming
Compose with appearance props, then align tokens in Tailwind v4—override `@theme` or map appearances in your app layer.
Button appearances
Landscape
Every stack makes tradeoffs—here is a compact, honest snapshot. Try the previews and judge for your team.
| Aspect | Zentauri UI | ShadCN | Chakra UI | Radix |
|---|---|---|---|---|
| Distribution | npm package + optional CLI to vendor/copy sources | Copy-paste / CLI into your repo | npm package, runtime theming | Unstyled primitives (compose yourself) |
| Styling | Tailwind v4-first, CVA variants | Tailwind + CSS variables | Emotion / styled-system | Bring your own styles |
| Motion | First-class animated entry points (e.g. modals, tabs) | Typically add your own motion | Built-in transition props | Unstyled; add Framer or CSS |
| Hooks catalog | Shipped alongside UI in one package | Focused on components; hooks vary by recipe | Some logic hooks | Primitive-focused |
Zentauri UI pairs a tight visual language with practical defaults: glass and solid appearances, motion variants where they matter, and documentation that mirrors real import paths.
Instead of abstract galleries, you get per-component previews with code you can paste into a React or Next.js repo.
The library covers layout, forms, overlays, data display, and feedback primitives—from buttons and inputs through modals, tables, and toasts—plus a growing set of hooks for window size, media queries, and other browser concerns.
Each family has its own preview route so you can compare density, animation, and accessibility notes before adopting a pattern org-wide.
Components assume React 18+ and Tailwind CSS v4 with the published preset. Framer Motion backs animated variants; react-icons supplies consistent iconography in examples.
Keep peer installs aligned with the Installation page to avoid duplicate motion or merge conflicts in class composition.
Start with Installation to wire Tailwind scanning and package aliases. Browse Components for UI families, Hooks for utilities, and use site search when you know a primitive name but not its route.
Set NEXT_PUBLIC_SITE_URL in deployment so canonical and Open Graph URLs resolve correctly for sharing.
No. Components are React-first; the docs emphasize Next.js App Router patterns because they are common, but you can use the package with Vite, Remix, or other React 18+ setups that support Tailwind CSS v4.
Install @zentauri-ui/zentauri-components from npm, follow the Installation guide for Tailwind v4 scanning and peer dependencies, then import from the documented ui paths.
Yes. Preview routes demonstrate the same exports you import in your app so you can copy snippets and align versions with your lockfile.