Skip to content
Cuelark UI
Feedback

Empty

Empty states with a framed icon, guidance and actions.

Empty states turn "nothing here" into a next step. The layout centres a crop-marked icon tile, a heading, one sentence of guidance and the primary action.

Preview

No messages yet

When customers write in, their conversations land here. Connect a channel to get started.

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/empty.json

The CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/empty.

Usage

import { Empty, EmptyActions, EmptyDescription, EmptyIcon, EmptyTitle } from "@/components/ui/empty";

<Empty>
  <EmptyIcon><InboxIcon /></EmptyIcon>
  <EmptyTitle>No messages</EmptyTitle>
  <EmptyDescription>Connect a channel to start.</EmptyDescription>
</Empty>

API reference

Empty · EmptyIcon · EmptyTitle · EmptyDescription · EmptyActions

Plain layout parts; EmptyTitle is an <h3>.

Accessibility

  • EmptyTitle is a heading, so the state appears in the page outline.
  • The icon is decorative.

FAQ

Also searched as: empty state · react empty state · no data component · zero state design · shadcn empty