{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-empty-16","type":"registry:block","title":"Search empty state with stacked file cards illustration","description":"Search empty state with stacked file cards illustration","dependencies":[],"registryDependencies":["empty"],"files":[{"path":"c-empty-16.tsx","type":"registry:block","content":"import {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\"\n\nfunction SearchCardsIllustration() {\n  return (\n    <div className=\"relative h-32 w-56\" aria-hidden=\"true\">\n      {/* Bottom card */}\n      <div className=\"bg-muted/50 dark:bg-muted/25 border-border/40 absolute right-6 bottom-4 left-6 flex h-12 items-center gap-2.5 rounded-lg border px-3\">\n        <div className=\"bg-muted-foreground/10 size-5 shrink-0 rounded\" />\n        <div className=\"flex flex-1 flex-col gap-1\">\n          <div className=\"bg-muted-foreground/10 h-2 w-full rounded\" />\n          <div className=\"bg-muted-foreground/8 h-2 w-2/3 rounded\" />\n        </div>\n      </div>\n      {/* Middle card */}\n      <div className=\"bg-muted/70 dark:bg-muted/40 border-border/50 absolute right-3 bottom-8 left-3 flex h-12 items-center gap-2.5 rounded-lg border px-3\">\n        <div className=\"bg-muted-foreground/12 size-5 shrink-0 rounded\" />\n        <div className=\"flex flex-1 flex-col gap-1\">\n          <div className=\"bg-muted-foreground/12 h-2 w-full rounded\" />\n          <div className=\"bg-muted-foreground/10 h-2 w-3/4 rounded\" />\n        </div>\n      </div>\n      {/* Front card */}\n      <div className=\"bg-background border-border absolute inset-x-0 bottom-12 flex h-14 items-center gap-3 rounded-lg border px-3.5 shadow-sm\">\n        <div className=\"bg-muted size-7 shrink-0 rounded\" />\n        <div className=\"flex flex-1 flex-col gap-1.5\">\n          <div className=\"bg-muted h-2.5 w-full rounded\" />\n          <div className=\"bg-muted/70 h-2 w-3/5 rounded\" />\n        </div>\n      </div>\n      {/* Fade */}\n      <div className=\"from-background/0 to-background pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-linear-to-b\" />\n    </div>\n  )\n}\n\nexport function Pattern() {\n  return (\n    <div className=\"flex items-center justify-center p-4\">\n      <Empty className=\"py-12\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <SearchCardsIllustration />\n          </EmptyMedia>\n          <EmptyTitle>Looking for something?</EmptyTitle>\n          <EmptyDescription>\n            Type a keyword and we&apos;ll search through files, folders, #tags,\n            and transcripts.\n          </EmptyDescription>\n        </EmptyHeader>\n      </Empty>\n    </div>\n  )\n}","target":"components/examples/c-empty-16.tsx"}],"meta":{"order":16}}