empty-state placeholder no-data blank onboarding empty-state placeholder no-data blank zero-state onboarding show empty state placeholder display no-data message
Empty State
Fetch pattern JSON:
curl https://webspire.de/patterns/empty-state/base.json base.html
<div class="ws-empty-state mx-auto max-w-md rounded-xl border-2 border-dashed border-[var(--ws-empty-state-border)] bg-[var(--ws-empty-state-bg)] px-6 py-12 text-center">
<div class="text-4xl">🚧</div>
<h3 class="mt-4 text-lg font-semibold text-[var(--ws-empty-state-text)]">No items yet</h3>
<p class="mt-2 text-sm text-[var(--ws-empty-state-text-soft)]">Get started by creating your first item. It only takes a moment.</p>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
empty-stateplaceholderno-datablankonboarding
Slots
| Name | Required | Description |
|---|---|---|
| icon | No | Visual indicator such as an emoji or SVG icon. |
| heading | Yes | Short title describing the empty state. |
| description | Yes | Brief explanation or guidance text. |
Centered empty state component with a dashed border, icon, title, and description. Use it when a list, table, or content area has no data to display.