# Empty state

> A dashed-border empty state with an icon, explanatory text, and a primary action.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/empty-state).

- Page, with a live preview: https://shadcn.exchange/r/quill/empty-state
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/empty-state-light-30d59cce258c6bfd.png
- Registry item: https://www.quilldesignsystem.com/r/empty-state.json
- Categories: feedback
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/empty-state.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `button`, `https://www.quilldesignsystem.com/r/icon.json`

## Notes from the registry

A dashed-border empty state with an icon, explanatory text, and a primary action. Do: Pair the explanation with a real, primary action button that actually fills the view (e.g. "New project"). Don't: Explain that a view is empty and leave the user with no way to act on it from that screen. Use empty when the empty state sits inside an existing surface (a list, a table, a card, a search result) and you compose it from parts: media, title, description and actions. Use empty-state for the finished stand-alone panel. Use error-404 when the view is empty because the resource doesn't exist or the route is wrong, not because the user hasn't created anything yet. Use onboarding when there's a multi-step setup to walk through, not a single action to take right now.

## Files

### `registry/blocks/empty-state.tsx`

```tsx
import { Icon } from '@/components/ui/icon'
import { Button } from '@/components/ui/button'

/** A dashed-border empty state with an icon, explanatory text, and a primary action. */
export function EmptyState() {
  return (
    <div className="flex w-[420px] flex-col items-center gap-4 rounded-xl border border-dashed border-border bg-card p-10 text-center">
      <div className="flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
        <Icon name="folder_open" size={24} />
      </div>
      <div className="flex flex-col gap-1">
        <h3 className="text-lg font-medium text-foreground">No projects yet</h3>
        <p className="text-sm text-muted-foreground">
          Create your first project and it’ll show up here.
        </p>
      </div>
      <Button>
        <Icon name="add" size={16} /> New project
      </Button>
    </div>
  )
}
```