Skip to content
38

Empty States.

What a page shows when there is nothing to show yet: a first run, a search with no matches, data that failed to load, a team with no members. Each one leads to the next step.

4 blocks, live at full size, install from here

01 / 04First run, validated create dialog, GitHub import, getting-started tips

Empty State 01

A first-run projects panel. Create a project with a validated name or import a GitHub repo, and the list replaces the empty state.

npx shadcn@latest add https://hirael.com/r/empty-state-01.json

02 / 04Echoed query, hidden match count, did you mean, clear filters

Empty State 02

A customer list with search and plan and status filters. When nothing matches, it repeats the query, says how many matches the filters hide, suggests close matches and offers to clear filters.

npx shadcn@latest add https://hirael.com/r/empty-state-02.json

03 / 04Error reference, copy button, retry with skeletons, contact support

Empty State 03

A deployments panel that failed to load, with a copyable error reference and a support link. Try again shows loading rows, fails once more, then loads the data.

npx shadcn@latest add https://hirael.com/r/empty-state-03.json

04 / 04Inline invite form, role select, several emails, pending list, revoke

Empty State 04

A members panel with an invite form inside the empty state. Invites are validated and listed as pending, and revoking the last one brings the empty state back.

npx shadcn@latest add https://hirael.com/r/empty-state-04.json