Patterns

States

Reusable empty, loading, and error blocks for tables, charts, search results, and full panels.

installnpx shadcn@latest add https://ds.bartoszrychlicki.com/r/br-states.json

Preview

Empty

No clients yet.

Create the first client record.

Loading

Syncing data.

Refreshing pipeline status.

Error

Could not load.

The request timed out.

import { EmptyState, ErrorState, LoadingState } from "@/components/br/states";

<EmptyState
  title="No clients yet."
  description="Create the first client record."
  action={<Button size="sm">Add client</Button>}
/>

<LoadingState title="Syncing data." />
<ErrorState title="Could not load." description="The request timed out." />

Props

PropTypeDefaultDescription
titleReactNode—Primary state message.
descriptionReactNode—Secondary guidance.
actionReactNode—Optional CTA.
compactboolean—Shorter version for tables and charts.

Notes

Use these instead of custom empty boxes. DataTable and Charts consume the same primitives internally.