EmptyState

npm package: import it from 'flootlets'

bun add flootlets

Or copy it in with the shadcn CLI: import it from '@/components/ui/…'

npx shadcn@latest add https://dyeoh.github.io/flootlets/r/empty-state.json

Both need Tailwind CSS v4; see Installation for the setup.

🛒

Your cart is empty

Have a look around the shop and add something you like.

Continue shopping

export default function EmptyStateExample() {
  return (
    <EmptyState
      icon="🛒"
      title="Your cart is empty"
      description="Have a look around the shop and add something you like."
      action={<Button href="#shop">Continue shopping</Button>}
      class="w-full"
    />
  );
}

For an empty cart, a search with no results or an order history with no orders: say what’s going on and offer a way forward. The icon is decorative and hidden from screen readers. Set headingLevel so the title fits your page’s heading outline.

Prop	Type
title	JSX	Required
description	JSX
icon	JSX	Decorative
action	JSX	e.g. a “Continue shopping” button
headingLevel	2 | 3 | 4	Default 2