EmptyState

Display contextual empty states with icons, titles, descriptions, and actions.

Installation

bash

npx @smicolon/fasla-ui@latest add empty-state

Run init once per project before adding components. See Installation.

Preview

No products yet

Get started by adding your first product.

Search Results

No results found

No results for "linen shirt". Try a different search term.

Empty Data

No orders yet

Get started by creating your first order.

Sizes

No products yet

Props

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Icon above the title.
`title`	`string`	—	Main title.
`description`	`string`	—	Text below the title.
`action`	`ReactNode`	—	Primary action.
`secondaryAction`	`ReactNode`	—	Secondary action.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Size of the empty state.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { EmptyState } from "@/components/blocks/empty-state"
import { Button } from "@/components/ui/button"

export function NoProducts() {
  return (
    <EmptyState
      title="No products yet"
      description="Get started by adding your first product."
      action={<Button>Add product</Button>}
    />
  )
}