Skip to content

Empty

What a list or page shows before it has anything in it: what goes here, and how to add the first one.

Sourcecomponents/empty.tsx

No projects yet

Projects group your briefs and their screens. Create one to start.

Import a brief

Inbox

You’re all caught up

New review requests will show up here.

Usage

Empty usage
import { FolderOpen } from "lucide-react";import { Button } from "@/components/button";import { Empty, EmptyContent, EmptyDescription, EmptyMedia, EmptyTitle } from "@/components/empty";
export function EmptyUsage({ create }: { create: () => void }) {  return (    <Empty bordered>      <EmptyMedia>        <FolderOpen />      </EmptyMedia>      <EmptyTitle>No projects yet</EmptyTitle>      <EmptyDescription>Projects group your briefs. Create one to start.</EmptyDescription>      <EmptyContent>        <Button onClick={create}>New project</Button>      </EmptyContent>    </Empty>  );}

When to use

Use when

A list, table or page with nothing in it yet: say what goes here and offer the first action

Don’t use when

A blank area or a bare "No data"; errors (use Alert)