Empty

Centered placeholder for regions with no data, no results, or a failed load.

Your inbox is empty
New project requests will show up here as they come in. Invite your team to start collaborating.
Installation
$Terminal
npx shadcn@latest add https://sdk-components.thesqd.com/r/empty.json
Usage
Import from the master file and compose. Pass `variant="outline"` for a dashed bordered panel.
TSImport
import { Empty } from "@/components/ui/empty";
TSExample
import { Button } from "@/components/ui/button";
import { Empty } from "@/components/ui/empty";
import { FoldersIcon } from "@/components/ui/folders";

export function Example() {
  return (
    <Empty
      icon={FoldersIcon}
      title="No projects yet"
      description="Create your first project to start collecting assets and briefs."
      action={<Button>New project</Button>}
    />
  );
}
Composition
Anatomy of the Empty primitive.
Empty                       (single component — pass content as props)
├── variant="default | outline"
├── icon={LucideAnimatedIcon}        (renders FeaturedIconAnimated above the title)
├── iconColor="brand | success | destructive | …"
├── iconSize="sm | md | lg | xl | 2xl"   (default "xl"; "2xl" for hero states)
├── iconAutoPlay                    (play stroke-draw on mount + replay on hover)
├── title=""                        (renders as SectionHeader)
├── description=""
├── titleSize="xs | sm | md | lg | xl"  (default "lg" — text-xl/2xl)
├── titleFont="sans | heading"    (default "sans" Inter; "heading" = Albra display)
└── action={<>buttons</>}           (action row beneath the description)

Need a custom layout (non-animated icon, multi-region body)? The slot
exports — EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription,
EmptyContent — are still exported as the escape hatch.
Default
Centered icon, title, description, and action buttons — drop into any panel that has nothing to show yet. Uses the `FoldersIcon` lucide-animated icon by default; hover the chip to replay the stroke draw.
Your inbox is empty
New project requests will show up here as they come in. Invite your team to start collaborating.
Outline
`variant="outline"` adds a dashed border + card background so the empty state reads as a self-contained panel.
No projects yet
Create your first project to start collecting assets and briefs.
Success
Mirrors the form submit success page. Uses the lucide-animated `CheckIcon` with `iconColor="success"`, `iconSize="2xl"`, and `iconAutoPlay` so the stroke draws once on mount.
Request submitted
Your request has been received
Title font
Toggle the title font via `titleFont`. `sans` (default) is Inter; `heading` switches to the Albra display face — handy for hero error/success states.
Sans (default)
Title rendered in Inter — matches body copy weighting.
Heading (Albra)
Title rendered in the Albra display face.
Error
Mirrors the form error boundary. Uses the lucide-animated `XIcon` with `iconColor="destructive"`, `iconSize="2xl"`, and `iconAutoPlay` plus retry / reload actions.
Something went wrong
An unexpected error occurred, please try again later. Support has been notified
API Reference
Props exposed by the Empty component.
PropTypeDefaultDescription
variant"default" | "outline""default"`outline` adds a dashed border and card background so the empty state reads as a self-contained panel.
iconAnimatedIconComponent—lucide-animated icon component (e.g. `CheckIcon`, `XIcon`, `FoldersIcon`). Rendered through FeaturedIconAnimated above the title.
iconColorFeaturedIconColor—Chip color — `brand`, `success`, `destructive`, etc. Mirrors the FeaturedIcon palette.
iconSize"sm" | "md" | "lg" | "xl" | "2xl""xl"Chip size. Use `2xl` for hero success/error states.
iconAutoPlaybooleanfalsePlay the lucide-animated stroke draw on mount and replay on hover.
titlestring—Heading rendered through SectionHeader.
descriptionstring—Subtext rendered through SectionHeader.
titleSize"xs" | "sm" | "md" | "lg" | "xl""lg"SectionHeader size. `lg` (default) is text-xl/2xl — fits inside Empty cleanly.
titleFont"sans" | "heading""sans"Title font family. `sans` (default) is Inter; `heading` switches to the Albra display face.
actionReactNode—Action row beneath the description — wrap multiple buttons in a fragment.
classNamestring—Override or extend the resolved root classes.