Empty

Empty state placeholder with icon, title, and action.

No items yet

Get started by adding your first item.

media variant

default

icon

#Installation

bunx --bun barefoot add empty

#Usage

No items yet

Get started by adding your first item.

1import {2  Empty,3  EmptyHeader,4  EmptyMedia,5  EmptyTitle,6  EmptyDescription,7  EmptyContent,8} from "@/components/ui/empty"910function EmptyStateDemo() {11  return (12    <Empty>13      <EmptyHeader>14        <EmptyMedia variant="icon">15          <PackageIcon />16        </EmptyMedia>17        <EmptyTitle>No items yet</EmptyTitle>18        <EmptyDescription>19          Get started by adding your first item.20        </EmptyDescription>21      </EmptyHeader>22      <EmptyContent>23        <Button>Add item</Button>24      </EmptyContent>25    </Empty>26  )27}

#Examples

#With Icon Variant

No packages

Your package list is empty. Add a package to get started.

<Empty className="border">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <PackageIcon />
    </EmptyMedia>
    <EmptyTitle>No packages</EmptyTitle>
    <EmptyDescription>
      Your package list is empty. Add a package to get started.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add package</Button>
  </EmptyContent>
</Empty>

#Without Action

No documents

Documents will appear here once they are created.

<Empty className="border">
  <EmptyHeader>
    <EmptyMedia>
      <FileTextIcon />
    </EmptyMedia>
    <EmptyTitle>No documents</EmptyTitle>
    <EmptyDescription>
      Documents will appear here once they are created.
    </EmptyDescription>
  </EmptyHeader>
</Empty>

#Interactive

No items yet

Get started by adding your first item.

1"use client"23import { createSignal } from "@barefootjs/client"4import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from "@/components/ui/empty"5import { Button } from "@/components/ui/button"67function EmptyDemo() {8  const [items, setItems] = createSignal<string[]>([])910  return items().length === 0 ? (11    <Empty className="border">12      <EmptyHeader>13        <EmptyMedia variant="icon"><PackageIcon /></EmptyMedia>14        <EmptyTitle>No items yet</EmptyTitle>15        <EmptyDescription>Get started by adding your first item.</EmptyDescription>16      </EmptyHeader>17      <EmptyContent>18        <Button onClick={() => setItems(["Item 1"])}>Add item</Button>19      </EmptyContent>20    </Empty>21  ) : (22    <div>23      <p>Items: {items().join(", ")}</p>24      <Button variant="outline" onClick={() => setItems([])}>Clear all</Button>25    </div>26  )27}

#API Reference

Empty

Prop	Type	Default	Description
children	Child	-	The content of the empty state (typically EmptyHeader and EmptyContent).

EmptyHeader

Prop	Type	Default	Description
children	Child	-	The header content (typically EmptyMedia, EmptyTitle, and EmptyDescription).

EmptyMedia

Prop	Type	Default	Description
variant	'default' \| 'icon'	'default'	The visual style of the media container. "icon" adds a rounded background.
children	Child	-	The media content (typically an SVG icon or image).

EmptyTitle

Prop	Type	Default	Description
children	Child	-	The title text of the empty state.

EmptyDescription

Prop	Type	Default	Description
children	Child	-	The description text of the empty state.

EmptyContent

Prop	Type	Default	Description
children	Child	-	The content area, typically containing action buttons.