Empty State

A composable empty / zero-data placeholder with media, title, description and action slots. Announced to assistive tech as a status region.

Features

Composable parts: Media, Title, Description and Actions.

Root renders role=“status” so the message is announced.

Media is marked aria-hidden as decorative.

Use any icon, emoji or illustration inside Media.

Fully unstyled — bring your own layout and theme.

Example

No projects yet

Create your first project to organize tasks, files and collaborators in one place.

Anatomy


import { EmptyState } from '@wire-ui/react'
 
<EmptyState.Root>
<EmptyState.Media>🗂️</EmptyState.Media>
<EmptyState.Title>No projects yet</EmptyState.Title>
<EmptyState.Description>
Create your first project to get started.
</EmptyState.Description>
<EmptyState.Actions>
<button>Create project</button>
</EmptyState.Actions>
</EmptyState.Root>

Styling

Empty State ships no styles — every part forwards className/class and native attributes. Compose a centered column with Tailwind and style each slot directly. The parts render semantic elements: Root a <div role="status">, Media a <div aria-hidden>, Title an <h3>, Description a <p>, and Actions a <div>.


<EmptyState.Root className="flex flex-col items-center gap-3 p-10 text-center">
  <EmptyState.Media className="text-3xl" />
  <EmptyState.Title className="text-base font-semibold" />
  <EmptyState.Description className="text-sm text-[#6b7280]" />
  <EmptyState.Actions className="mt-2 flex gap-2" />
</EmptyState.Root>

Sub-component props

Every part extends the native attributes of its underlying element and adds no extra props.

Component	Element	Description
`EmptyState.Root`	`<div role="status">`	Wrapper; announces the empty state to assistive tech
`EmptyState.Media`	`<div aria-hidden="true">`	Decorative icon / illustration slot
`EmptyState.Title`	`<h3>`	Short headline
`EmptyState.Description`	`<p>`	Supporting copy
`EmptyState.Actions`	`<div>`	Container for call-to-action buttons

Accessibility

EmptyState.Root sets role="status", so screen readers announce the message when it appears
EmptyState.Media is aria-hidden="true" — it is treated as decorative; keep meaning in the Title/Description
Use EmptyState.Title (an <h3>) to give the region a clear, concise heading