Components
Buttons, badges, avatars, tags, cards, chat, and interactive elements.
32 components
Buttons
Badges
Avatars
Company Avatar
Circular avatar with a building icon placeholder for companies. Same sizes as Avatar. Use alongside a company name in tables and detail views.
Person Avatar
Inline avatar + name chip with a hover card that reveals contact details. Pure CSS — no JS required.
Avatar
An avatar with initials fallback and configurable size.
Display
Chat Bubble
Chat conversation bubbles (sent and received) with avatar, bot-icon, and hover action toolbar.
Chat Input
Compact single-line chat input bar with optional attach button and send button.
Divider
Horizontal and vertical dividers with optional label.
Keyboard Keys
Keyboard shortcut display using DaisyUI kbd.
Progress
A DaisyUI linear progress bar with configurable color, value, and max.
Steps
Step progress indicator for multi-step flows.
Links
DaisyUI link styles with color variants and hover.
Person Cell
Compact avatar + name + subtitle identity block for use in lists, tables, and flex rows.
Theme Controller
Checkbox or radio inputs with the theme-controller class change the page theme.
Text Rotate
Animated component that cycles through text lines with an infinite loop.
Hover 3D Card
Card that tilts and rotates in 3D space when hovered.
Hover Gallery
Horizontal hover image gallery — first image visible by default, others revealed on hover.
Theme Toggle
Animated sun/moon theme toggle that persists the selection to localStorage. Uses the swap-rotate animation for smooth icon transition.
Aspect Ratio
Container that maintains a fixed aspect ratio for its content.
Separator
Visual divider between content sections.
Icon
Accessible Iconify icon with colon-format names and size presets.
Soft Box
A muted rounded panel — the bordered, softly-filled box that groups related content, at the default, lighter or unfilled surface.
Attachment
File attachment chip with kind icon or thumbnail, size, and optional download/remove actions.
Cards
Progress Card
Card with a gradient header, a progress bar, and an optional stats row.
Card
A DaisyUI card container with a title.
Stat Card
A compact summary stat widget with icon, value, and label.
Testimonial Card
Quote card with star rating, avatar, name, and role. Composes existing Card, Avatar, and Rating primitives.
Stat Card — Sparkline
KPI stat card with inline SVG sparkline chart showing trend data.