Component Catalog

Form text field supporting label, placeholder, required marker, helper text, and validation error state.

Multi-line text area with label, rows configuration, and error state handling.

Form dropdown select accepting associative or indexed arrays with error support.

Custom-styled checkbox input with accessible label wrapper and error validation.

Single-choice selection control with multiple aesthetics: Skeuomorphism (3D tactile depth), Flat Minimal 2D, Neumorphic Soft UI, and Radio Cards.

Input field with attached prefix and/or suffix addons (text, currency symbols, units, icons).

Styled drag-and-drop file upload zone with file type filters, upload progress, and file management.

Styled native date input with label, min/max constraints, required marker, and helper text.

Searchable select dropdown with autocomplete filtering. Keyboard-friendly and fully accessible.

Clickable button with variants (primary, secondary, ghost, danger), sizes (sm, md, lg), and disabled state.

Toggleable floating menu with custom items, icons, keyboard and click-outside dismissal.

Toggle switch for boolean states, features, and custom dark/light theme switching with animated icons.

Interactive table with client-side search, column sort, and pagination. No server round-trips needed.

Contextual callout box with icon, optional title, and dismiss button support.

Status and label badges with 6 semantic variants and optional glowing dot indicator.

Auto-dismissing pop-up notification with duration timer and variant styles.

CSS animated loading indicator ring with size variants (sm, md, lg) and accessibility labels.

Linear progress bar with striped gradients, animated states, and percentage badges.

Pulsing placeholder loading cards, avatars, and text bars for seamless async state UI.

Empty state illustration with icon, title, message, and call-to-action button for blank views.

Accessible confirmation dialog for destructive actions with warning indicator, action details, and cancel/confirm buttons.

Interactive star rating component with half-star and read-only support.

Content card container with optional header, footer, and customizable inner padding.

Responsive styled data table with hover elevation and zebra striping.

Metric display card with label, value, optional icon, and trend indicator (up/down with percentage).

Vertical timeline for activity logs, changelogs, or order tracking with icons, descriptions, and timestamps.

Smooth collapsible disclosure component with chevron indicator.

User profile avatar with initials fallback, size variants (xs to xl), and circle/square shapes.

Contextual hover bubble for actions, icons, and helper descriptions.

Interactive tabbed navigation with animated active indicators and content panels.

Full responsive top navigation bar with brand icon, navigation links, and mobile burger toggle.

Hierarchical trail navigation with vector SVG chevron separators.

Page navigation bar with prev/next arrows, numbered pages, ellipsis for large ranges, and active state.

Multi-step wizard progress indicator. Completed steps show a checkmark; active step is highlighted.

Modern SaaS application navigation with workspace switcher, search shortcut (⌘K), categorized groups, active states, badges, and user profile footer.

Accessible dialog overlay with Esc key support, click-outside dismiss, and header/body/footer structure.

Slide-in panel from left, right, top, or bottom. Includes overlay backdrop and close button.

Floating info panel anchored to a trigger button. Supports top/bottom/left/right placement.

Horizontal or vertical separator with optional text label, badge, or icon in the center.

Responsive max-width layout wrapper that automatically centers page content with balanced side margins.

Responsive site footer with branding, nav links, and legal notice.