Yami UI

Display an empty state.

No notifications

You are all caught up. Check back later.

Installation

Add the empty component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/empty.json

Usage

import { BellIcon } from "lucide-react"

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

<Empty className="w-80 border border-dashed border-border">
  <EmptyHeader>
    <EmptyMedia variant="icon"><BellIcon /></EmptyMedia>
    <EmptyTitle>No notifications</EmptyTitle>
    <EmptyDescription>You are all caught up. Check back later.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent><Button size="sm">Refresh</Button></EmptyContent>
</Empty>

Examples

Minimal

Header only

Empty inbox

Nothing to see here yet.

Code

import { InboxIcon } from "lucide-react"

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

<Empty className="w-80 border border-dashed border-border">
  <EmptyHeader>
    <EmptyMedia variant="icon"><InboxIcon /></EmptyMedia>
    <EmptyTitle>Empty inbox</EmptyTitle>
    <EmptyDescription>Nothing to see here yet.</EmptyDescription>
  </EmptyHeader>
</Empty>