Empty

What a place looks like before it has anything in it, and how to fill it.

No documents yet

Write specs, meeting notes, and decisions in one place. Documents you create or that teammates share with you will show up here.

Tip: press⌘Nfrom anywhere to start a document.

Fig. 1 An empty documents list that says what will appear here and how to add the first one.

When to use it

Use Empty when a list, table, or search has nothing to show. Say what will appear here and offer the action that fills it.

For a search with no results, suggest a change to the search instead of an action.

Alert

Stays on the page.

Changes saved

Your project is up to date and ready to share.

Warnings and errors about this page.

Toast

Comes and goes.

Confirmations that need no reply.

Badge

Labels a status.

PublishedTrialCurrentInternal

Published, Draft, and Beta.

EmptyThis page

Nothing here yet.

No documents yet

Write specs, meeting notes, and decisions in one place. Documents you create or that teammates share with you will show up here.

Tip: press⌘Nfrom anywhere to start a document.

First runs and empty searches.

Fig. 2 Four ways to tell people something. Pick by how long it should stay and how much it matters.

How it behaves

Compose Empty with EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, and EmptyContent for actions. The column centers in its container while text and actions stay left-aligned.

EmptyMedia shows an illustration by default: pass an icon from your set and it renders at 64px in the muted color with thinned strokes. variant="icon" places a small icon in a control-filled tile instead.

EmptyDescription uses 16px muted body text; separate paragraphs stack with a small gap, and inline Kbd or icons sit on the text line. Say what belongs here and how to add it.

Lead with one primary action and keep secondary actions quieter, such as the secondary Button. Add border for a dashed panel inside a larger surface. For a list that is empty only because of a filter, say so and offer to clear it.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

empty-example.tsx

The full source is yours to edit once installed:

empty.tsx

1import { cn } from "@/registry/lib/utils"2import { cva, type VariantProps } from "class-variance-authority"3import type * as React from "react"4 5// The column centers in its container while its text and actions stay left-aligned, so a long description6// reads like prose. Add border for a dashed panel when it sits inside a larger surface.7function Empty({ className, ...props }: React.ComponentProps<"div">) {8  return (9    <div10      data-slot="empty"11      className={cn(12        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed border-border p-6 text-left",13        className14      )}15      {...props}16    />17  )18}19 20function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {21  return (22    <div23      data-slot="empty-header"24      className={cn("flex w-full max-w-sm flex-col items-start gap-3", className)}25      {...props}26    />27  )28}29 30// default holds an illustration: a 64px line drawing in the muted color, with icon strokes thinned so it31// reads as artwork rather than an enlarged icon. icon places a small icon in a control-filled tile.32const emptyMediaVariants = cva(33  "mb-4 flex shrink-0 items-center justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0",34  {35    variants: {36      variant: {37        default:38          "bg-transparent text-muted-foreground [&_svg:not([class*='size-'])]:size-16 [&_svg_*]:[stroke-width:0.75]",39        icon:40          "mb-2 size-10 justify-center rounded-lg bg-control text-muted-foreground [&_svg:not([class*='size-'])]:size-5"41      }42    },43    defaultVariants: {44      variant: "default"45    }46  }47)48 49function EmptyMedia({50  className,51  variant = "default",52  ...props53}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {54  return (55    <div56      data-slot="empty-icon"57      data-variant={variant}58      className={cn(emptyMediaVariants({ variant, className }))}59      {...props}60    />61  )62}63 64function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {65  return <div data-slot="empty-title" className={cn("heading-16", className)} {...props} />66}67 68// Paragraphs inside stack with a small gap; inline Kbd and icons sit on the text line.69function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {70  return (71    <div72      data-slot="empty-description"73      className={cn(74        "flex flex-col gap-3 body-md text-pretty text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:text-primary [&_svg]:inline [&_svg]:size-4 [&_svg]:align-[-0.125em]",75        className76      )}77      {...props}78    />79  )80}81 82function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {83  return (84    <div85      data-slot="empty-content"86      className={cn("flex w-full max-w-sm min-w-0 flex-col items-start gap-2.5 body-sm", className)}87      {...props}88    />89  )90}91 92export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle }93