Common

EmptyState

Reusable empty state placeholder with icon, title, description, and action button.

EmptyState

A placeholder component for empty collections (no items, no results, empty cart, etc.) with an icon, title, description, and optional action link.

Preview

Your cart is empty

Looks like you haven't added any items yet.

Start Shopping

Usage

<CEmptyState
  icon="i-heroicons-shopping-bag"
  title="Your cart is empty"
  description="Looks like you haven't added any items yet."
  action-label="Start Shopping"
  action-to="/products"
/>

Minimal

<CEmptyState title="No results found" />

Without Action

<CEmptyState
  icon="i-heroicons-magnifying-glass"
  title="No results"
  description="Try adjusting your filters or search terms."
/>

Props

Prop	Type	Default	Description
`icon`	`string`	—	Heroicons icon name
`title`	`string`	required	Heading text
`description`	`string`	—	Subtitle text
`actionLabel`	`string`	—	Action button label
`actionTo`	`string`	—	Action button route
`ui`	`Partial<{...}>`	—	Per-instance theme overrides

Events

Event	Payload	Description
`action`	—	Action button clicked (when no `actionTo`)

Slots

Slot	Scoped Props	Description
`icon`	—	Custom icon/illustration
`default`	—	Custom body content
`actions`	—	Custom action buttons

SearchBar

Search input with live suggestions, recent searches, and keyboard navigation.

ProductTypeBadge

Badge indicating the product type (physical, digital, subscription, auction, rental, event).