brand-ui — Screen States

Make it yours

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Using brand-ui (MCP: https://elabs-ai.com/mcp), build a screen-states screen.
Intent: Screen States — the full state grid the templates omit..
Use case: Screen States — the full state grid the templates omit.
Use only @elabs-ai/components-* components and semantic tokens; follow the brand-ui playbook for this archetype.

Examples

5 live examples

Loading

In-flight load — Skeleton rows, not a bare spinner.

Empty

A search/filter returned nothing — a real empty state with a way out.

Errored

Recoverable failure — StatePanel kind="error" (role="alert") + retry.

First Run

Never-used screen — onboarding empty with one primary action.