shadcn.io is not affiliated with official shadcn/ui

Shadcn Empty for React

Placeholder for empty or zero-state views.

PreviewCode

No Projects Yet

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

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/empty.json

npx shadcn@latest add https://kit.dev/r/base/empty.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/empty.json

yarn shadcn@latest add https://kit.dev/r/base/empty.json

This component depends on Button, Avatar, Input Group and Kbd. Install them first if you haven't already.

Install the following dependencies:

bun add tailwind-variants

npm install tailwind-variants

pnpm add tailwind-variants

yarn add tailwind-variants

Copy and paste the following code into your project.

components/ui/empty.tsx

import type React from "react";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";

export const Empty = (props: React.ComponentProps<"div">) => {
  const { className, ...rest } = props;

  return (
    <div
      className={cn(
        "cn-empty flex w-full min-w-0 max-w-full flex-1 flex-col items-center justify-center text-balance text-center",
        className
      )}
      data-slot="empty"
      {...rest}
    />
  );
};

Update the import paths to match your project setup.

Usage

import { FolderCodeIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FolderCodeIcon aria-hidden="true" />
    </EmptyMedia>
    <EmptyTitle>No Projects Yet</EmptyTitle>
    <EmptyDescription>
      You haven&apos;t created any projects yet.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Create Project</Button>
  </EmptyContent>
</Empty>

Demos

Outline

Use a dashed border for an outlined empty state.

PreviewCode

Background

Use background utilities on Empty.

PreviewCode

Avatar

Use EmptyMedia with an avatar.

PreviewCode

Avatar Group

Use EmptyMedia with an avatar group.

PreviewCode

Input Group

Add an InputGroup inside EmptyContent.

PreviewCode

Card

Empty state with linked actions.

PreviewCode

Rtl

Right-to-left empty. See the RTL configuration guide for document direction.

PreviewCode

API Reference

Empty

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"empty"

EmptyHeader

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"empty-header"

EmptyMedia

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"empty-icon"

data-variant?string

EmptyTitle

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"empty-title"

EmptyDescription

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"empty-description"

EmptyContent

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"empty-content"