Components
Empty state
Centered placeholder when a section has nothing to show.
A composition ported from Atlas. Prefer the icon path inside widgets and tables.
Pass illustration for a page-level drawing of your own. Atlas's ICS-branded SVG
illustrations stay upstream.
The icon well is bg-surface-sunken. subtle is unframed. bordered is a dashed
border-stroke on bg-surface-raised/50. Title is text-heading-5 font-display
(text-heading-3 at lg); description is text-body-sm font-body (text-body-md
at lg) on text-fg-muted.
No files yet
Drop a file here or create one to get started.
size="lg" and variant="bordered" for a drop-zone or list placeholder.
No results
Try a different query or clear the filters.
Usage
import { FolderOpen } from '@phosphor-icons/react';
import { EmptyState } from '@/components/ui/empty-state';
<EmptyState
icon={FolderOpen}
title="No files yet"
description="Drop a file here or create one to get started."
/>Install
shadcn add @gesso/empty-state