EmptyState

A quiet feedback surface for empty collections, filtered results, and first-run states.

Preview#

No messages yet

Conversations you start will show up here.

Anatomy#

import {
  EmptyState,
  EmptyStateContent,
  EmptyStateIcon,
  EmptyStateTitle,
} from "raft-ui";

<EmptyState>
  <EmptyStateContent>
    <EmptyStateIcon />
    <EmptyStateTitle />
  </EmptyStateContent>
</EmptyState>

Usage#

Copy#

No results for "linear sync"

Try a different keyword or check the selected filters.

No messages yet

Conversations you start will show up here.

Actions#

No channels yet

Create your first channel to start organizing work.

Customize#

Drop files to import customers

CSV and TSV files can be mapped before anything is saved.

Composition#

No notifications right now

New mentions, assignments, and approvals will appear here.

API#WIP

EmptyState#

Prop	Type	Default	Description
`render`	ReactElement \| (props, state) => ReactElement	—	Change the root element, for example to section with an aria-labelledby hook.
`...props`	HTMLAttributes<HTMLDivElement>	—	Native div attributes plus className.

EmptyStateContent#

Prop	Type	Default	Description
`...props`	HTMLAttributes<HTMLDivElement>	—	Recommended wrapper for icon, title, and description. Keeps copy centered, bounded, and balanced.

EmptyStateIcon#

Prop	Type	Default	Description
`...props`	HTMLAttributes<HTMLDivElement>	—	Muted icon slot. The slot owns default SVG sizing per theme; override with className for custom media.

EmptyStateTitle#

Prop	Type	Default	Description
`...props`	HTMLAttributes<HTMLDivElement>	—	Muted sentence-case title. Use render to promote it to a real heading.

EmptyStateDescription#

Prop	Type	Default	Description
`...props`	HTMLAttributes<HTMLDivElement>	—	Optional supporting copy with a readable measure.

EmptyStateActions#

Prop	Type	Default	Description
`...props`	HTMLAttributes<HTMLDivElement>	—	Optional action row. Add flex and gap classes when rendering more than one action.