Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

No Messages Empty State for Ark UI

An empty inbox titled No messages yet, with a message icon and a New Message button under it.

A message icon, the title No messages yet, and a line about sending the first message. New Message, with a plus, sits under the text.

Use it in chat or a support inbox before the first message. If the thread failed to load, say that in an Alert. In React, Ark UI does not know the inbox is empty.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Empty anatomy: root, header, media, title, description, content

Usage

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <MessageSquareIcon aria-hidden="true" />
    </EmptyMedia>
    <EmptyTitle>No messages yet</EmptyTitle>
    <EmptyDescription>
      Start a conversation by sending your first message.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>
      <PlusIcon aria-hidden="true" data-icon="inline-start" />
      New Message
    </Button>
  </EmptyContent>
</Empty>

FAQ

What is on the New Message button?

A default Button in EmptyContent, with a PlusIcon icon before the label New Message. The file does not open a composer. Add that in the button's click handler.

What icon is above the title?

MessageSquareIcon in EmptyMedia with variant="icon". The plus on the button is a second icon.

What does the empty inbox say?

EmptyTitle is "No messages yet". EmptyDescription says to start a conversation by sending the first message.

Which parts make up the header?

EmptyHeader holds EmptyMedia, then EmptyTitle, then EmptyDescription. EmptyContent is the next sibling and holds the button.

How do I add a second action?

Put another Button next to New Message and wrap them in a div with flex gap-2 inside EmptyContent.

What name does the button get?

New Message, from its text. Mark PlusIcon and MessageSquareIcon aria-hidden so the name stays that label.

API Reference

Empty

Sets variant="icon". The rest is on the Empty page.

Button

No extra props in this demo. The rest is on the Button page.

All 22 empty state examples