Component library

Available components

Explore the UI components currently available in Zentauri UI. Each preview shows live examples you can adapt in React and Next.js applications.

Components (40)

Accordion

Navigation

Single or multiple disclosure panels with keyboard-friendly triggers and animated content regions.

Open preview

Alert

Feedback

Inline status messages with semantic tones, optional dismiss controls, and motion presets.

Open preview

Animated Number

Data

Digit-by-digit number entrances and a count-up counter with themeable appearances and motion presets.

Open preview

Avatar

Display

Circular images with fallback initials and optional status indicators.

Open preview

Badge

Display

Compact labels and counts that share the library palette with optional close actions.

Open preview

Breadcrumb

Navigation

Navigation paths with interactive links and separators for deep-link navigation.

Open preview

Buttons

Interactive

A comprehensive set of interactive buttons with robust motion presets and style variants.

Open preview

Card

Layout

Composable surfaces for summaries and actions with glass, outline, and motion options.

Open preview

Checkbox

Form

Standalone checkbox controls with labels, indeterminate state, controlled state, and animated checkmarks.

Open preview

Command palette

Overlay

Cmd+K command palette with global hotkey, keyboard navigation, grouped results, live filtering, and an animated entry.

Open preview

Context menu

Overlay

Right-click action menus with labels, separators, disabled items, nested submenus, and dropdown-aligned variants.

Open preview

Copy button

Actions

One-click copy-to-clipboard button with idle and copied states, an optional animated icon swap, and tokenized appearances.

Open preview

Divider

Layout

Horizontal or vertical separators with optional labels and subtle motion.

Open preview

Drawer

Overlay

Edge-attached panels with focus management, scroll locking, and slide animations.

Open preview

Dropdown

Navigation

Menu surfaces with portal positioning, keyboard navigation, and grouped items.

Open preview

Dynamic Stepper

Navigation

Sequential progress indicators with clickable steps and optional labels.

Open preview

Empty state

Layout

Zero-data layouts with icon, title, description, and primary action slots.

Open preview

File upload

Form

Drag-and-drop file inputs with progress indicators and custom validation.

Open preview

Inputs

Form

Accessible input fields including text, file, date, checkbox, and radio inputs with unified styling.

Open preview

Kbd

Display

Semantic keyboard shortcut keycaps for single keys or chords, with configurable separators and an optional animated key press.

Open preview

Marquee

Display

CSS-only infinite logo rails, status tickers, and vertical release feeds with tokenized appearances.

Open preview

Modal

Overlay

Dialog overlays with configurable size, position, and entrance motion.

Open preview

OTP input

Form

Segmented one-time code fields with paste fill, auto-advance, completion callbacks, and validation state.

Open preview

Progress

Feedback

Determinate progress bars with shimmer animation and a wide appearance scale.

Open preview

Popover

Overlay

Click-triggered floating panels for forms, action previews, and rich contextual content.

Open preview

Radio group

Form

Compound radio controls for exclusive choices with shared state, orientation, and animated indicators.

Open preview

Rating

Form

Feedback ratings with half-step values, custom react-icons support, hidden form values, and accessible radio options.

Open preview

Scroll area

Layout

Themeable overflow containers with vertical, horizontal, hover, hidden, and always-visible scrollbar variants.

Open preview

Select

Form

Custom listbox selects with single or multi-value modes and matched trigger width.

Open preview

Skeleton

Loading

Placeholder blocks, text lines, avatars, and buttons while content streams in.

Open preview

Slider

Form

Interactive sliders with range selection and value display for numeric inputs.

Open preview

Spinner

Loading

Busy indicators with ring, dots, pulse, and bars variants across standard sizes.

Open preview

Stepper

Navigation

Sequential progress indicators with clickable steps and optional labels.

Open preview

Table

Data

Structured data tables with striped, bordered, and sticky header treatments.

Open preview

Tabs

Navigation

Tab lists and animated panels for switching related content without navigation.

Open preview

Timeline

Data

Vertical event tracks with themeable indicators, connector lines, and an optional staggered scroll-in animation.

Open preview

Toast

Feedback

Transient notifications via a provider hook with stacked viewports and timers.

Open preview

Toggle

Form

Switch controls with semantic appearances and spring thumb motion.

Open preview

Tooltip

Overlay

Hover and focus hints with delays, placements, and compact styled surfaces.

Open preview

Tree view

Data

Data-driven hierarchical trees with keyboard navigation, selection state, indentation guides, and animated expand/collapse.

Open preview

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.