Empty States blocks

What to show when there is nothing yet: first use, no search results and no data.

3 variants. Every block is one file built from CK-UI components and works in light and dark mode.

First use

Explains a feature on first visit and offers to create the first item or import existing data.

npm install @radix-ui/react-slot class-variance-authority react-icons

Repeats the search that found nothing and offers to clear it or reset the filters.

Also copy the files they import: Field, Label.

npm install @radix-ui/react-label @radix-ui/react-slot class-variance-authority react-icons

A report card with nothing to show yet that says when data will appear.

npm install @radix-ui/react-slot class-variance-authority react-icons