UI Skillbook
2

Empty State

A centred block, with optional media and actions, telling people why there is nothing here yet and how to proceed.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-empty-state and follow the Siteplane Empty State skill it prints for this task.

Paste this into your agent.

Empty State appears once loading finishes and a list, table or view has nothing to show. It covers first-run screens, searches with no matches and recoverable gaps. Your app decides which case applies and which action fits.

Install

bashnpx shadcn@4.18.0 add @siteplane/empty-state

Import it from @/siteplane/components/empty-state. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Skeleton: Pick Skeleton or Spinner instead while the data is still loading.
  • vs Alert: Pick Alert instead when an error appears but the rest of the page still shows content.

Rules

  • Show it only after loading has settled, never as a loading placeholder.
  • Set level on EmptyTitle when the title should be a real heading in the page outline.
  • Put the next-step buttons in EmptyContent and make the primary action the obvious one.
  • For no matching results, keep search and filter controls visible and offer a way to clear them.
  • Use EmptyMedia variant="icon" for a compact icon, or the default variant for richer media such as avatars.

Reference

  • Empty State docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Feedback. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-empty-state

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Animation Vocabularyby emilkowalski

Sharpen motion language so animation choices feel deliberate and consistent.

MotionExternalGitHub stars: 51.4K

Antfu Designby antfu

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

LayoutExternalGitHub stars: 6K

Baseline Uiby ibelick

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

Design SystemsExternalGitHub stars: 10.4K

Beautiful Shadowsby MengTo

Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.

VisualExternalGitHub stars: 7.1K

Back to Siteplane UI