Why teams pick Zentauri UI
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.
What ships today
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.
Common use cases
- Bootstrap dashboards with tables, navigation, overlays, and feedback components.
- Prototype marketing flows with buttons, cards, accordions, and form controls.
- Add motion-rich modals, drawers, tabs, and toasts with consistent animation tokens.
- Document an internal design system with import paths that match published npm exports.
- Extend Tailwind v4 themes while keeping class APIs predictable for contributors.
Stack and compatibility
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.
How to explore the library
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.
FAQ
Is Zentauri UI only for Next.js?
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.
Where do I install the package?
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.
Are previews the same as production exports?
Yes. Preview routes demonstrate the same exports you import in your app so you can copy snippets and align versions with your lockfile.