Empty
A centered empty-state surface — no results, first-run, or a cleared list.
@garn/ui/emptyDefault
An empty inbox with a next action.
Your inbox is empty. New messages will appear here.
Installation
garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.
npx garn-ui add empty- Registry
empty- Source
- empty.tsx
- Deps
class-variance-authority- Registry deps
utils
Import
import { Empty } from "@garn/ui/empty";Props
Generated from the component's TypeScript types.
No component-specific props — this is a thin wrapper over its native element.
Styling
Target these data-slots and remap these tokens to restyle without forking the component.
[data-slot="empty"]| Property | Token | Tier |
|---|---|---|
padding | --garn-pad-surface | semantic · air |
stackGap | --garn-gap-stack | semantic · air |
fieldGap | --garn-gap-field | semantic · air |
mediaTile | --garn-muted | semantic · identity |
Overview
Empty communicates a blank state — no search results, nothing created yet, a cleared list — and turns a dead end into a next step. EmptyHeader groups the EmptyMedia (icon/illustration), EmptyTitle, and EmptyDescription, with EmptyContent below for an action. It's for a genuinely empty result, not a wait: use a Skeleton or Spinner while loading, and an Alert for an error.
Guidelines
Distinguish the three blanks. "Nothing yet" (onboarding), "no matches" (a filtered search), and "all done" each want different copy and actions — don't ship one generic "No data". Name which one it is and what to do about it.
Always offer a way forward. The most useful empty state includes the next action — "Create your first project", "Clear filters". For a no-results search, suggest broadening the query rather than leaving the user stuck.
Keep the tone light and the layout calm. A short title, a sentence of guidance, and one primary action; the illustration sets mood but shouldn't dominate. Don't confuse empty with error — reserve alarming language for actual failures.
Best practices
- Lead with a concise title and one clear next action in EmptyContent.
- Use EmptyMedia variant="icon" for a single lucide icon.
- Don't stack multiple competing actions.
- Don't use it for errors that need an accessible alert without providing one.
Content guidelines
- Say plainly what's missing and why, then offer one clear next step.
- Keep the tone neutral and constructive — guidance, not an apology.
Accessibility
- • Use a real heading (or aria-labelledby pointing at EmptyTitle) where the state should be announced.
- • If it reports an error that needs attention, give the actionable message role=status or wrap it in an alert.
- Status
- Stable
- Version
v0.3.0- Introduced
v0.1.0
garn doesn't yet record a per-release version history. This reflects the component's current lifecycle state; full changelog entries will appear once the metadata pipeline emits a lifecycle.history field.