The Empty component displays a centered zero-state message — typically a title, description, and
an optional action — for when there is no content to show. The component is built and styled by
Shadcn UI.
Use this composition when the zero-state needs media, a heading, or an action. For a plain
one-line "nothing to show" message inside a list, grid, or panel, use EmptyState instead —
it takes a single localized message and renders it in a role="status" region. These
primitives set no ARIA role, so pass role="status" yourself before the zero-state appears.
Two things the caller controls: the root sets border-dashed but no border width —
Platform.Bible's scoped Tailwind Preflight zeroes borders, so pass className="tw:border" to
draw the dashed outline — and EmptyTitle renders a <div>, not a heading, so nest your
own heading element inside it when the zero-state is a region's entire content.
The Empty component displays a centered zero-state message — typically a title, description, and an optional action — for when there is no content to show. The component is built and styled by Shadcn UI.
Use this composition when the zero-state needs media, a heading, or an action. For a plain one-line "nothing to show" message inside a list, grid, or panel, use EmptyState instead — it takes a single localized
messageand renders it in arole="status"region. These primitives set no ARIA role, so passrole="status"yourself before the zero-state appears.Two things the caller controls: the root sets
border-dashedbut no border width — Platform.Bible's scoped Tailwind Preflight zeroes borders, so passclassName="tw:border"to draw the dashed outline — and EmptyTitle renders a<div>, not a heading, so nest your own heading element inside it when the zero-state is a region's entire content.