UI Components

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

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

Locks a box’s width-to-height proportions using the padding-bottom technique, so it degrades correctly even without native aspect-ratio support.

Type-to-filter combobox built on the same ZyraOption/token foundation as ZyraSelect, with a text input trigger instead of a button.

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

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

The foundational layout primitive — spacing, radius, background, shadow, border and dimensions driven entirely by design tokens.

A trail of ancestor links showing the user’s current location within a hierarchy of pages.

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

Coordinates a set of ZyraButton children — shared size/variant/color/radius, layout, and optional single/multiple selection — without duplicating Button behavior.

Month-grid date picker with single/multiple/range selection, a quick month/year picker, keyboard navigation, min/max constraints, and full Angular Forms (CVA) integration — the foundation Date Picker will build on.

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

Slideshow for images, testimonials, or promo cards — arrow and dot navigation, keyboard support, looping, and optional autoplay.

Accessible checkbox with indeterminate state, label positioning, three sizes, and full Angular forms support.

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

A one-click copy-to-clipboard trigger with a built-in "copied" confirmation state, for API keys, code snippets, and share links.

Monospace code snippets with an optional filename/language header, line numbers, and a one-click copy button.

Purpose-built modal for confirm/cancel prompts — title, message, and Cancel/Confirm actions wired up on top of zyra-modal.

Max-width plus centering with a horizontal gutter — the wrapper every page-level layout starts from, with a Bootstrap-style responsive breakpoint mode.

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

Slide-in panel anchored to any edge of the screen, sharing zyra-modal's focus trap and dismiss behavior.

A trigger-activated menu panel for grouping secondary actions like edit, duplicate, or delete.

A friendly placeholder for empty lists, no search results, or first-run screens, with room for an icon and actions.

Click-to-browse and drag-and-drop file picker with type/size/count validation and a removable file list.

A flexbox layout primitive with direction, alignment, gap and wrap — plus a companion ZyraFlexItem for per-child grow/shrink/basis/order control.

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

A CSS Grid layout primitive with responsive columns/rows, auto-fit/auto-fill tracks, named areas, and a companion ZyraGridItem for column/row span.

An app-shell header with brand, nav and action slots — built-in mobile drawer, scroll elevation, and sticky/fixed positioning.

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

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

Select multiple options from a dropdown list, shown as dismissible chips in the trigger — extends the same option/keyboard model as ZyraSelect.

One-time-passcode entry rendered as N separate boxes — set otpLength on ZyraInput to switch it from a single field into this mode.

Page-number navigation for tables and lists, with smart ellipsis collapsing for large page counts.

Standard password field with a built-in show/hide toggle — set type="password" on ZyraInput inside ZyraFormField and the eye icon appears automatically.

A click- or hover-triggered floating panel for rich contextual content, menus, or previews — richer than a tooltip.

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

Accessible radio button group for mutually exclusive choices — vertical or horizontal layout, arrow key navigation.

A star-rating input for reviews and feedback forms, with hover preview and keyboard support.

A styled, keyboard-navigable scroll container with custom scrollbars, optional auto-hide, scroll shadows, smooth scrolling and a programmatic scroll API.

Custom dropdown select for choosing from a list of options — fully keyboard accessible with smooth open/close animation.

A collapsible app-shell navigation rail with header/footer slots, grouped sections, and active/disabled item states.

Shimmer loading placeholders with 20+ preset layout variants — from simple text lines and shapes to full dashboard, product, calendar, and chat skeletons.

Range input for numeric selection — a fully styled native <input type="range"> that keeps native keyboard, drag, and touch support for free.

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

A flex layout primitive that arranges children in a row or column with consistent gap spacing, alignment, and wrapping.

A numbered step indicator for multi-step forms and wizards, with horizontal and vertical layouts.

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

Tab navigation with 4 style variants, 3 sizes, icons, badges, closeable tabs, vertical orientation, and full keyboard support.

Multi-line text input with auto-resize, size variants, and full ZyraFormField integration for labels and validation.

Drop-in theme picker button wired directly to ZyraThemeService — a compact toggle or a full 5-theme menu.

A vertical timeline for order history, activity feeds, and audit logs, with color-coded status markers.

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

Pressable button that holds a boolean pressed/unpressed state — for toolbar actions, formatting controls, and filter pills.

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

Consistent text styles for headings, body copy, and captions — renders the correct semantic HTML tag automatically.