Empty

A composable empty state component for displaying when there is no content, such as empty search results, empty lists, or first-time experiences.

Default

Get started by creating your first project. It only takes a few minutes to set up.

New messages will appear here when you receive them.

Container component that centers content and provides size variants.

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Controls padding and gap of the empty state
className	string	-	Additional CSS classes
...props	React.ComponentProps<"div">	-	Standard div element props

Absolutely positioned decorative background with a radial gradient mask. Marked as aria-hidden.

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps<"div">	-	Standard div element props

Rounded container for icons or illustrations with a muted background.

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Size of the media container and inner icon
className	string	-	Additional CSS classes
...props	React.ComponentProps<"div">	-	Standard div element props

Heading element for the empty state message.

Prop	Type	Default	Description
as	React.ElementType	'h2'	HTML element to render as (e.g. h3, h4)
className	string	-	Additional CSS classes
...props	React.ComponentProps<"h2">	-	Standard heading element props

Muted paragraph text with constrained width for readability.

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps<"p">	-	Standard paragraph element props

Flex container for action buttons.

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps<"div">	-	Standard div element props