Empty

Use the Empty component to display an empty state, with a title, description, and optional actions.

Last updated August 7, 2026

CreditsUnchangedPublished

Overview

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

import { ArrowUpRightIcon, FolderCodeIcon } from "lucide-react"
 
import { Button, buttonVariants } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import { cn } from "@workspace/ui/lib/utils"
 
export function EmptyDemoExample() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FolderCodeIcon />
        </EmptyMedia>
        <EmptyTitle>No Projects Yet</EmptyTitle>
        <EmptyDescription>
          You haven&apos;t created any projects yet. Get started by creating
          your first project.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent className="flex-row justify-center gap-2">
        <Button>Create Project</Button>
        <Button variant="outline">Import Project</Button>
      </EmptyContent>
      <a
        href="#"
        className={cn(
          buttonVariants({ variant: "link", size: "sm" }),
          "text-muted-foreground"
        )}
      >
        Learn More <ArrowUpRightIcon />
      </a>
    </Empty>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/empty.json

Usage

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
 
export function Example() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Icon />
        </EmptyMedia>
        <EmptyTitle>No data</EmptyTitle>
        <EmptyDescription>No data found</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Add data</Button>
      </EmptyContent>
    </Empty>
  )
}

Outline

Use the border utility class to create an outline empty state.

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

import { CloudIcon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
 
export function EmptyOutlineExample() {
  return (
    <Empty className="border border-dashed">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <CloudIcon />
        </EmptyMedia>
        <EmptyTitle>Cloud Storage Empty</EmptyTitle>
        <EmptyDescription>
          Upload files to your cloud storage to access them anywhere.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline" size="sm">
          Upload Files
        </Button>
      </EmptyContent>
    </Empty>
  )
}

Background

Use the bg-* utilities to add a background to the empty state.

No Notifications

You're all caught up. New notifications will appear here.

import { BellIcon, RefreshCcwIcon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
 
export function EmptyBackgroundExample() {
  return (
    <Empty className="bg-muted/30">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <BellIcon />
        </EmptyMedia>
        <EmptyTitle>No Notifications</EmptyTitle>
        <EmptyDescription className="max-w-xs text-pretty">
          You&apos;re all caught up. New notifications will appear here.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline">
          <RefreshCcwIcon data-icon="inline-start" />
          Refresh
        </Button>
      </EmptyContent>
    </Empty>
  )
}

Input Group

Add an InputGroup component to EmptyContent.

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

import { SearchIcon } from "lucide-react"
 
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from "@/components/ui/empty"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
import { Kbd } from "@/components/ui/kbd"
 
export function EmptyInputGroupExample() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyTitle>404 - Not Found</EmptyTitle>
        <EmptyDescription>
          The page you&apos;re looking for doesn&apos;t exist. Try searching for
          what you need below.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <InputGroup className="sm:w-3/4">
          <InputGroupInput placeholder="Try searching for pages..." />
          <InputGroupAddon>
            <SearchIcon />
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">
            <Kbd>/</Kbd>
          </InputGroupAddon>
        </InputGroup>
        <EmptyDescription>
          Need help? <a href="#">Contact support</a>
        </EmptyDescription>
      </EmptyContent>
    </Empty>
  )
}

RTL

پیامی وجود ندارد

هر زمان پیام جدیدی دریافت کنید، اینجا نمایش داده می‌شود.

import { InboxIcon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
 
export function EmptyRtlExample() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <InboxIcon />
        </EmptyMedia>
        <EmptyTitle>پیامی وجود ندارد</EmptyTitle>
        <EmptyDescription>
          هر زمان پیام جدیدی دریافت کنید، اینجا نمایش داده می‌شود.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline">بازخوانی</Button>
      </EmptyContent>
    </Empty>
  )
}

No city found

A pattern for City Selector's dependent city field before a province is chosen.

شهری یافت نشد

ابتدا یک استان انتخاب کنید تا فهرست شهرهای آن نمایش داده شود.

import { MapPinOffIcon } from "lucide-react"
 
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
 
export function EmptyCityExample() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <MapPinOffIcon />
        </EmptyMedia>
        <EmptyTitle>شهری یافت نشد</EmptyTitle>
        <EmptyDescription>
          ابتدا یک استان انتخاب کنید تا فهرست شهرهای آن نمایش داده شود.
        </EmptyDescription>
      </EmptyHeader>
    </Empty>
  )
}

API Reference

EmptyMedia

Prop	Type	Default	Description
variant	"default" \| "icon"	"default"	Styles the media as a plain wrapper or a boxed icon tile.

Edit this page on GitHub

PreviousCombobox NextInput