Components
Browse all available Docyrus UI native primitives. These are the core building blocks — buttons, inputs, cards, modals, and more.
Available Components
| Component | Description |
|---|---|
| Accordion | Collapsible content sections with animated expand/collapse transitions. |
| Alert | Inline alert banner with variant colors, sizes, and rounded corners. |
| Alert Dialog | Confirmation dialog with customizable title, description, variant colors, and action buttons. |
| Avatar | User avatar component with image, initials fallback, status indicator, and pressable support. |
| Badge | Small label component for status, categories, or counts with variant and size options. |
| Button | Pressable button component with multiple variants and sizes for user actions. |
| Card | Versatile card container with header, footer, animations, and pressable support. |
| Carousel | Horizontal content carousel with pagination dots and arrow navigation. |
| Checkbox | Standalone checkbox component with optional label and size variants. |
| Collapsible | Expandable/collapsible container with animated height transitions. |
| Confirmation Button | Button that opens a countdown confirmation modal before executing the action. |
| Date Time Picker | A modal date and time picker with calendar grid and scrollable time controls. |
| Date Time Range Picker | A modal date-time range picker with start/end tabs, calendar grid, and time controls. |
| Day Picker | An inline calendar day picker supporting single, multiple, and range selection modes. |
| Docyrus Icon | CDN-powered icon component supporting Font Awesome, Huge Icons, emojis, and custom libraries. |
| Drawer | Slide-in side panel with animated entrance, backdrop, and swipe-to-dismiss support. |
| Dropdown Menu | Menu popup component with items, separators, and destructive actions. |
| Duration Select | Duration picker with hours and minutes grid, supporting multiple display formats. |
| Empty State | Placeholder display for empty content areas with variant-specific icons and actions. |
| Error State | Error display with variant-specific messaging, retry actions, and expandable error details. |
| Fab | Floating action button with expandable menu, position control, and variant colors. |
| Grid | Responsive grid layout with configurable columns, gap control, and spanning grid items. |
| Input | Text input primitive with size variants, icons, and validation states. |
| Input OTP | OTP code input with segmented cells for verification codes. |
| Label | Form label component with size variants and required indicator. |
| Mini Calendar | Compact date picker calendar with month navigation and locale-aware day names. |
| Modal | Flexible modal dialog with preset types, header/footer configurations, and position options. |
| Network Banner | Animated banner for displaying network connectivity status with retry and dismiss actions. |
| Notification Stack | Stacked notification cards with dismiss, load more, and action buttons. |
| Pagination | Page navigation control with page numbers, ellipsis, and info text. |
| Phone Input | Phone number input with country code picker and search. |
| Popover | Floating content panel with arrow, placement options, and multiple visual variants. |
| Progress | Linear progress bar with label, size, and color variant options. |
| QR Code | QR code display component with size variants and optional logo overlay. |
| Radio Group | Radio button group component with compound pattern for single-option selection. |
| Rating | Star rating input with half-star support and custom icon rendering. |
| Search Input | Search input with debounce and clear button, supporting manual and automatic search modes. |
| Select | Dropdown select component with modal picker for option selection. |
| Separator | Visual divider component for horizontal or vertical separation. |
| Skeleton | Animated loading placeholders with card, list, table, and calendar presets. |
| Slider | Draggable slider with custom range, step, tooltip, and track marks. |
| Spinner | Loading indicator component with size and variant options. |
| Status | Status indicator badge with dot and colored variants. |
| Stepper | Step indicator component for multi-step wizards and onboarding flows. |
| Switch | Toggle switch component with optional label and size variants. |
| Table | Lightweight data table with sorting, striped rows, grouping, and built-in pagination. |
| Tabs | Tabbed navigation with horizontal/vertical orientation and multiple visual variants. |
| Textarea | Multi-line text input component with size variants and validation. |
| Timeline | Vertical timeline component for displaying chronological events. |
| Toast | Stackable toast notification system with rich colors, swipe-to-dismiss, and a Sonner-like imperative API. |
| Toggle | Toggle button component with pressed state and variant options. |
| Toggle Group | Segmented control component for single or multiple option selection. |
| Tooltip | Contextual popup with configurable placement, arrow, and visual variants. |
| Tree View | Hierarchical tree component with expand/collapse, search, and optional checkboxes. |
| Wheel Picker | Scrollable wheel picker for selecting from a list of options with snap-to-item behavior. |