All ArekUI components

ar-btn Button Triggers an action: primary, outline, ghost, sizes and states. ar-modal Modal A dialog layered above the page, opened by an attribute. ar-drawer Drawer Off-canvas panel that slides in from any edge of the screen. ar-popover Popover Anchored bubble of extra content, toggled on click. ar-swap Swap Flips between two states with a single checkbox.

ar-card Card Groups related content into a single framed block. ar-badge Badge Small status label that sits beside or on top of content. ar-table Table Tabular data with striped rows and hover feedback. ar-avatar Avatar Thumbnail representation of a person or a brand. ar-timeline Timeline A run of events laid out along a vertical line. ar-divider Divider Separates content either horizontally or vertically. ar-prose Prose Typography scale for long-form written content. ar-tag Tag Compact label for categorising or removing an item. ar-chat Chat Bubble One line of conversation with sender, time and avatar.

ar-navbar Navbar Top bar holding a brand, links and page utilities. ar-breadcrumb Breadcrumb Shows the current page's place in a hierarchy. ar-pagination Pagination Moves the reader between related pages of content. ar-tabs Tabs Switches between sibling views without a page load. ar-accordion Accordion Stacked panels that reveal one section at a time. ar-link Link Underlined text link with hover and visited states. ar-join Join Groups adjacent items behind shared borders and radius. ar-stepper Stepper Numbers the steps of a multi-part process.

ar-alert Alert Inline message: info, success, warning or error. ar-toast Toast Temporary notification stacked in a corner of the page. ar-progress Progress Bar showing how much of a task has been completed. ar-skeleton Skeleton Grey placeholder blocks shown while content loads. ar-loading Loading Animated bar with pips, hints and a live percentage. ar-tooltip Tooltip Hint revealed on hover or focus, driven by data-tip.

ar-forms Forms Input, select, checkbox, radio, toggle and textarea. ar-file-upload File Upload Drag-and-drop area for attaching files to a form. ar-rating Rating Star score with keyboard-accessible radio semantics.

ar-hero Hero Full-bleed banner for a headline and a call to action. ar-carousel Carousel Horizontally scrollable strip with prev and next controls.