Previous List Group Next Chip

Badge

Small inline label for status, count, and category tags.

This page is a scaffold for the Badge component. Build the live markup, Alpine.js interactions, and DaisyUI/Tailwind classes here, then replace this placeholder block with the real preview + code snippet.

Planned variants & states to implement:

  • Solid color variants
  • Outline variants
  • Pill / rounded
  • Dot (indicator only)
  • Removable (×)
  • With icon
  • Sizes (xs → lg)
12

Card

Flexible content container with header, body, footer, and media.

Accordion

Collapsible content panels with smooth expand/collapse animation.

Timeline

Vertical or horizontal event/step timeline with markers.

List Group

Styled list of items with optional icons, badges, and actions.

Chip

Compact interactive label for filters, tags, and selections.

Avatar

User image or initials display with size and group variants.

Statistic Card

Highlighted metric display with label, value, and trend.

Feature Card

Icon + title + description card for feature showcases.

Pricing Card

Pricing tier card with plan name, price, features, and CTA.

Team Member Card

Profile card with photo, name, role, and social links.

Testimonial Card

Customer quote card with avatar, name, and star rating.

FAQ Item

Single expandable Q&A item for FAQ sections.
Previous List Group Next Chip