What this library covers
Zentauri UI focuses on practical React components with Tailwind-first styling. Previews map one-to-one to export paths so you can copy imports into a Next.js repo quickly.
Use these pages when you need to compare variants, motion presets, and density before committing tokens in production.
How previews are organized
Each route under /preview highlights a single component family. Examples favor composition over configuration so you can mirror patterns in your own codebase.
Server-friendly layouts coexist with interactive demos that opt into client rendering only where necessary.
Common use cases
- Kickstart a dashboard layout with cards, tables, and navigation primitives.
- Prototype forms with inputs, selects, toggles, and validation-friendly patterns.
- Add feedback with alerts, toasts, progress, and loading skeletons.
- Ship overlays such as modals, drawers, and tooltips with consistent motion.
- Document internal design systems with copy-ready code examples.
Accessibility expectations
Previews demonstrate default semantics, but your integration must supply labels, descriptions, and focus management appropriate to each flow.
Validate keyboard paths any time you change stacking context or portal targets.
Next.js and deployment tips
Set NEXT_PUBLIC_SITE_URL for accurate canonical and Open Graph URLs. Keep heavy syntax highlighting and demos out of critical LCP paths when possible.
Colocate design tokens with Tailwind config extensions from your app, not from the preview shell alone.
FAQ
Can I use these components outside Next.js?
Yes. They are React components; Next.js examples here illustrate common App Router patterns but are not mandatory.
Where do I install the package?
Follow the Installation preview for workspace and npm setup, then import published paths from @zentauri-ui/zentauri-components.
How do I report issues or request variants?
Use your team’s issue tracker or design-system backlog; previews document what ships today so you can diff against future releases.