Zyra UI

UI Components

Explore the library components and open each one on its own dedicated route for previews and usage examples.

16 components7 categories
Actions

Button

Token-aware action buttons for primary flows, secondary actions, and compact utility triggers.

Status

Badge

Small status labels for updates, counts, state pills, and quick metadata throughout the interface.

Layout

Card

Flexible content containers for dashboards, previews, settings panels, and modular content blocks.

Identity

Avatar

Profile and team visuals that make lists, comments, and user surfaces feel more human and scannable.

Forms

Input

Foundation text inputs for login forms, filters, search flows, and structured data entry experiences.

Forms

Form Field

Field wrappers that align labels, hints, and validation copy into a more polished form system.

Feedback

Spinner

Loading indicators for async states, background fetches, and actions that need a clear pending signal.

Feedback

Toast

Transient notifications for confirmations, warnings, and system messages without interrupting the flow.

Overlays

Tooltip

Helpful hover and focus details for dense controls, icon actions, and space-constrained interfaces.

Overlays

Modal

Accessible dialog overlay with focus trap, ESC to close, backdrop dismiss, and flexible header/footer slots.

Feedback

Alert

Inline status messages for success, warning, danger, and info states with optional title and dismiss support.

Actions

Chip

Compact interactive labels for filters, tags, and selections - supports dismissible and selectable modes.

Forms

Toggle

On/off switch control for settings, preferences, and feature flags with full keyboard and accessibility support.

Feedback

Progress

Linear progress bars for uploads, task completion, storage usage, and any measurable loading state.

Layout

Divider

Horizontal and vertical separators for organizing content sections, form layouts, and navigation groups.

Layout

Accordion

Collapsible content sections for FAQs, settings panels, and any grouped information that benefits from progressive disclosure.