Empty

Installation

›pnpm dlx shadcn@latest add @evolphin/empty

Usage

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";

<Empty>
  <EmptyHeader>
    <EmptyMedia>
      <Inbox className="size-10 text-muted-foreground" />
    </EmptyMedia>
    <EmptyTitle>No items found</EmptyTitle>
    <EmptyDescription>
      You don't have any items yet. Start by creating one.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Create Item</Button>
  </EmptyContent>
</Empty>

Type Definitions

interface EmptyMediaProps {
  /** The visual style of the media container */
  variant?: "default" | "icon";   
EmptyMediaProps.variant?: "default" | "icon" | undefined
The visual style of the media container
}

Examples

Default

No messages

Your inbox is currently empty. New messages will appear here.

Icon Variant

Create a file

Get started by creating a new file in this directory.

API Reference

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

EmptyMedia

Prop	Type	Default	Description
`variant`	`"default" \	"icon"`	`"default"`
`className`	`string`	-	Additional CSS classes

EmptyTitle

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

EmptyDescription

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

EmptyContent

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Search

Empty

On this page