Empty states

A reusable EmptyState and the three a product needs: first run, no search results and a failed load.

No projects yet

Projects hold your invoices, customers and reports. Start with one; you can import the rest later.

Import CSV

Nothing matches “harbour”

Check the spelling, or search every workspace instead of just this one.

Invoices did not load

Our server took too long to answer. Nothing was lost; trying again usually works.

Installation

1. Install a design system if the project does not have one yet: Cueit, Skita or Folio.
2. Add the block. It installs to components/satori-ui/blocks/ with the shadcn/ui primitives it uses.
npx shadcn@latest add @satoriui/empty-state-01

3. Render it inside the system's scope. With the scope class on <html> there is nothing more to do. To try another system, change the class.

app/page.tsx

1
2
3
4
5
import { EmptyStates01 } from "@/components/satori-ui/blocks/empty-state-01";
export default function Page() {
  return <EmptyStates01 />;
}

How it adapts

It is built from one shadcn/ui primitive, Button, which every design system re-skins.

For what shadcn has no name for, it uses 4 of the shared contract utilities. Every system defines them identically and sets the variables they read.

ds-text: Body copy
ds-small: Secondary copy
ds-tile: Surfaces it draws itself
ds-well: Icon washes

Next blockDashboard