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

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

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

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

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

Modal

Overlay

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

Open preview

Progress

Feedback

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

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

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

useBodyScrollLock

Hook

Sets document body overflow hidden while active, restoring the previous style on cleanup.

Open preview

useClickOutside

Hook

Listens for pointer or touch events outside a ref element and closes floating UI.

Open preview

useClipboard

Hook

Async copy to the system clipboard with copied and error state plus optional auto-reset.

Open preview

useControllableState

Hook

Single state tuple that follows either controlled value props or internal default state.

Open preview

useDebouncedValue

Hook

Returns a value that updates only after the source has been stable for a delay.

Open preview

useDisclosure

Hook

Boolean open state with open, close, toggle, and setOpen helpers built on controllable state.

Open preview

useDocumentTitle

Hook

Syncs document.title from React and optionally restores the prior title on unmount.

Open preview

useFocusManagement

Hook

Escape to close, initial focus into a container, and focus containment while open.

Open preview

useHover

Hook

Pointer enter and leave tracking on the element attached via a ref callback.

Open preview

useInView

Hook

Boolean intersection flag from a ref callback and shared IntersectionObserver options.

Open preview

useIntersectionObserver

Hook

Low-level ref callback plus the latest IntersectionObserverEntry for custom logic.

Open preview

useIsomorphicLayoutEffect

Hook

Resolves to useLayoutEffect in the browser and useEffect on the server to avoid warnings.

Open preview

useIsMounted

Hook

Returns a stable function that reports whether the component is still mounted.

Open preview

useLocalStorage

Hook

JSON-serialized state mirrored to localStorage with cross-tab storage events.

Open preview

useMediaQuery

Hook

Subscribes to window.matchMedia and updates when the query result changes.

Open preview

useNetworkStatus

Hook

Boolean online flag wired to window online and offline events.

Open preview

usePageVisibility

Hook

Tracks document.visibilityState for background tabs and mobile app switches.

Open preview

usePagination

Hook

Page index, item model, and navigation helpers including buildPaginationItems.

Open preview

usePrefersColorScheme

Hook

Resolves prefers-color-scheme to a light or dark string with SSR-friendly defaults.

Open preview

usePrefersReducedMotion

Hook

Boolean for prefers-reduced-motion: reduce via the shared media query hook.

Open preview

useResizeObserver

Hook

Observes element content box size via ResizeObserver and a ref callback.

Open preview

useSessionStorage

Hook

JSON-serialized state mirrored to sessionStorage for the active tab session.

Open preview

useThrottledCallback

Hook

Wraps a callback so it runs at most once per interval based on wall-clock time.

Open preview

useToggle

Hook

Boolean state with toggle and explicit set helpers for simple on-off UI.

Open preview

useWindowSize

Hook

Tracks innerWidth and innerHeight with a resize listener on the window.

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.