Zyra UI
UI Components
Explore the library components and open each one on its own dedicated route for previews and usage examples.
Button
Token-aware action buttons for primary flows, secondary actions, and compact utility triggers.
Badge
Small status labels for updates, counts, state pills, and quick metadata throughout the interface.
Card
Flexible content containers for dashboards, previews, settings panels, and modular content blocks.
Avatar
Profile and team visuals that make lists, comments, and user surfaces feel more human and scannable.
Input
Foundation text inputs for login forms, filters, search flows, and structured data entry experiences.
Form Field
Field wrappers that align labels, hints, and validation copy into a more polished form system.
Spinner
Loading indicators for async states, background fetches, and actions that need a clear pending signal.
Toast
Transient notifications for confirmations, warnings, and system messages without interrupting the flow.
Tooltip
Helpful hover and focus details for dense controls, icon actions, and space-constrained interfaces.
Modal
Accessible dialog overlay with focus trap, ESC to close, backdrop dismiss, and flexible header/footer slots.
Alert
Inline status messages for success, warning, danger, and info states with optional title and dismiss support.
Chip
Compact interactive labels for filters, tags, and selections - supports dismissible and selectable modes.
Toggle
On/off switch control for settings, preferences, and feature flags with full keyboard and accessibility support.
Progress
Linear progress bars for uploads, task completion, storage usage, and any measurable loading state.
Divider
Horizontal and vertical separators for organizing content sections, form layouts, and navigation groups.
Accordion
Collapsible content sections for FAQs, settings panels, and any grouped information that benefits from progressive disclosure.