Primitives
Empty
Empty-state layout for blank lists, zero results, and new workspaces.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Parts
Exported compound parts from the installed source.
Empty├── EmptyHeader├── EmptyMedia├── EmptyTitle├── EmptyDescription└── EmptyContentThe refined source installs this primitive from src/registry/sources/refined/ui/empty.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/empty.jsonRaw code
Primary installed primitive source
Empty slot
src/registry/sources/refined/ui/empty.tsx
import type { ComponentProps } from "react";import type { EmptyProps } from "@/components/refined-ui/contracts";import { cn } from "@/components/refined-ui/lib/cn";import { skinSlot } from "@/components/refined-ui/skin";// Refined skin slot, plain markup (no Base UI): icon tile + title + muted copy + action area.// Tracks DA via --muted-foreground/--foreground; drop in a card, list body, or full page.export function Empty({ className, ...props }: EmptyProps) { return ( <div data-ui="agent" data-slot="empty" className={cn( "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-[var(--radius-lg)] p-6 text-center text-balance", skinSlot("empty", {}), className, )} {...props} /> );}export function EmptyHeader({ className, ...props }: ComponentProps<"div">) { return ( <div data-ui="agent" data-slot="empty-header" className={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)} {...props} /> );}// Icon tile: --radius-lg box, muted fill; glyph passed as children.export function EmptyMedia({ className, ...props }: ComponentProps<"div">) { return ( <div data-ui="agent" data-slot="empty-media" className={cn( "mb-2 flex size-10 shrink-0 items-center justify-center rounded-[var(--radius-lg)] bg-muted text-muted-foreground [&>svg]:size-5 [&>svg]:shrink-0", skinSlot("empty-media", {}), className, )} {...props} /> );}export function EmptyTitle({ className, ...props }: ComponentProps<"div">) { return <div data-ui="agent" data-slot="empty-title" className={cn("text-sm font-medium text-foreground", className)} {...props} />;}export function EmptyDescription({ className, ...props }: ComponentProps<"p">) { return <p data-ui="agent" data-slot="empty-description" className={cn("text-sm/relaxed text-muted-foreground", className)} {...props} />;}// Action area: buttons/links/compact form to recover from empty state.export function EmptyContent({ className, ...props }: ComponentProps<"div">) { return ( <div data-ui="agent" data-slot="empty-content" className={cn("flex w-full max-w-sm flex-col items-center justify-center gap-2 text-sm text-balance", className)} {...props} /> );}