Skip to content

Foundations

Empty State

Empty, no-results and error states with an icon, message and actions.

2 variantsMIT

Preview

No conversations yet

Start a chat and it will show up here, grouped by day.

No matches

Nothing matches “stripe”.

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/empty-state.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { EmptyState } from "@/components/ui/empty-state";

{chats.length === 0 && (
  <EmptyState
    icon={ChatsCircle}
    title="No conversations yet"
    description="Start a chat and it will show up here."
    action={{ label: "New chat", onClick: newChat, icon: Plus, iconWeight: "bold" }}
  />
)}

{error && <EmptyState tone="error" title="Couldn't load history" onRetry={reload} />}

Props

PropTypeDefaultDescription
title*ReactNode—One line saying what's empty or what failed.
descriptionReactNode—What to do next.
iconIcon—Phosphor icon, filled. Errors default to a warning.
action / secondaryAction{ label, onClick, icon?, iconWeight? }—Silver primary and a quiet secondary button.
tone"neutral" | "error""neutral"Error tints the icon and announces as an alert.
onRetry() => void—With tone error and no action, adds a Retry button.
compactbooleanfalseRow layout for empty lists inside a panel.