Edge case · Page template

Empty State

Illustration + heading + CTA — what users see before any data exists.

app.example.com/customers
What it is

When to reach for it.

The first thing a user sees when a list, table, dashboard, or workspace has nothing in it yet. Designed to make the zero-data case feel intentional — like the app is waiting for them — rather than broken. Pairs with every list, datagrid, dashboard, and detail template to handle the 'I've never used this before' moment.

  • Building any screen that can be empty on first visit.
  • Replacing a 'no results found' line with something that explains what to do next.
  • Onboarding the first 30 seconds of a brand-new account.
Structure

What's in the template.

Each section pre-wired with the right CleenUI primitives. Swap, remove, or extend any of them — the template is a starting point, not a constraint.

  1. 1

    Illustration

    Inline SVG or icon — sets the mood, doesn't have to be elaborate.

    Icon
  2. 2

    Headline

    One sentence explaining what's missing.

    Heading
  3. 3

    Supporting copy

    1–2 sentences on what to do.

    Text
  4. 4

    Primary CTA

    Single action — 'Create your first X'.

    Button
Components used

Everything this template touches.

All of these are in the catalog — the Builder skill imports them automatically. Each chip links to that component's page.

IconHeadingTextButton
What you customize

Substitutions.

When the Builder skill scaffolds this template for you, these are the fields it asks about — or infers from your prompt.

FieldExampleWhere it appears
itemNouncustomerHeadline, CTA label
ctaLabelCreate your first customerButton label
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Ask your AI agent to scaffold this template in your project — the Builder skill knows the Empty State layout and the components it uses.

Get started

Get started with CleenUI.

Two paths to your first component. Pick the one that fits how your team builds.

Path A · Recommended

With AI agent skills

One prompt to your AI tool. The Setup skill handles dependencies, design tokens, build config, and component registration — all without leaving your editor.

Path B · Manual

With npm

The classic flow. Install the package, import the styles, drop in your first component. No agents required — same end result.