New project requests will show up here as they come in. Invite your team to start collaborating.
npx shadcn@latest add https://sdk-components.thesqd.com/r/empty.jsonimport { Empty } from "@/components/ui/empty";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>}
/>
);
}Empty (single component — pass content as props)
├── variant="default | outline"
├── size="default | sm" (sm = compact chip + tighter spacing for card empties)
├── icon={LucideAnimatedIcon} (renders FeaturedIconAnimated above the title)
├── iconColor="brand | success | destructive | muted | …"
├── iconVariant="gradient | flat" (default "gradient"; "flat"+muted = neutral chip)
├── 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.New project requests will show up here as they come in. Invite your team to start collaborating.
You haven't created any projects yet. Get started by creating your first project.
Create your first project to start collecting assets and briefs.
Your request has been received
Title rendered in Inter — matches body copy weighting.
Title rendered in the Albra display face.
An unexpected error occurred, please try again later. Support has been notified
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "default" | `outline` adds a dashed border and card background so the empty state reads as a self-contained panel. |
size | "default" | "sm" | "default" | `sm` is the compact state — smaller icon chip (`lg`), tighter padding/gap, and a base-size title. For card/section empties; `default` is the full-page hero. |
icon | AnimatedIconComponent | — | lucide-animated icon component (e.g. `CheckIcon`, `XIcon`, `FoldersIcon`). Rendered through FeaturedIconAnimated above the title. |
iconColor | FeaturedIconColor | — | Chip color — `brand`, `success`, `destructive`, etc. Mirrors the FeaturedIcon palette. |
iconVariant | "gradient" | "flat" | "gradient" | Featured-icon chip style. `gradient` (default) is the brand-tinted bordered chip; `flat` is a soft borderless tint — pair with `iconColor="muted"` for a neutral gray chip. |
iconSize | "sm" | "md" | "lg" | "xl" | "2xl" | "xl" / "lg" (per size) | Chip size. Defaults from `size` (`xl` default, `lg` for `sm`). Use `2xl` for hero states. |
iconAutoPlay | boolean | false | Play the lucide-animated stroke draw on mount and replay on hover. |
title | string | — | Heading rendered through SectionHeader. |
description | string | — | Subtext rendered through SectionHeader. |
titleSize | "xs" | "sm" | "md" | "lg" | "xl" | "lg" / "sm" (per size) | SectionHeader size. Defaults from `size` (`lg` default — text-xl/2xl; `sm` for the compact state). |
titleFont | "sans" | "heading" | "sans" | Title font family. `sans` (default) is Inter; `heading` switches to the Albra display face. |
action | ReactNode | — | Action row beneath the description — wrap multiple buttons in a fragment. |
className | string | — | Override or extend the resolved root classes. |