primitives

Empty

Empty / zero-data state. Tells the user what's missing AND what they can do about it. Never just a sad face — always a clear next action.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/empty.json

Or import from the workspace package:

import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from "@8maverik8/design";

Examples

First-run state

No audiences yet

Audiences group people by attributes you choose. Create your first to start segmenting.

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon"><Inbox /></EmptyMedia>
    <EmptyTitle>No audiences yet</EmptyTitle>
    <EmptyDescription>
      Audiences group people by attributes you choose. Create your first to start segmenting.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Create audience</Button>
  </EmptyContent>
</Empty>

Anatomy

EmptyWrapper with dashed border and centered content.
EmptyHeaderTop block: media (icon) + title + description.
EmptyMediaIcon container. `variant="icon"` gives the rounded muted square.
EmptyTitle / EmptyDescriptionWhat's missing, in one short line + a sentence of context.
EmptyContentBottom block — primary CTA, link to docs, etc.

Guidelines

Provide exactly one primary CTA in `EmptyContent` (e.g. "Create your first audience").Two CTAs split the user's attention; the empty state's job is to unblock them.
Reuse Empty for *loading* states.Use Skeleton while data loads. Empty shows when data is genuinely zero.