EmptyState

EmptyState provides a consistent, centered layout for empty data scenarios. It shows an icon, title, description, and optional call-to-action. The content container uses w-full max-w-[400px] so it fills narrow containers gracefully while capping width in wider ones.

Interactive example#

Empty State · Live example

A fresh start

Your next idea deserves a place to grow.

Create a first project to leave the empty state, then reset the example.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Import#

TSX

import { EmptyState } from '@clidey/ux';

Basic usage#

TSX

import { IconInbox as Inbox } from '@clidey/ux';

<EmptyState
  icon={<Inbox className="size-10 text-muted-foreground" />}
  title="No messages"
  description="When you receive a message, it will appear here."
/>

With action#

TSX

import { IconFolder as FolderOpen } from '@clidey/ux';

<EmptyState
  icon={<FolderOpen className="size-10 text-muted-foreground" />}
  title="No projects yet"
  description="Create your first project to get started."
>
  <Button>
    <Plus className="size-4" />
    Create project
  </Button>
</EmptyState>

Search empty state#

TSX

import { IconSearch as SearchX } from '@clidey/ux';

function NoResults({ query }: { query: string }) {
  return (
    <EmptyState
      icon={<SearchX className="size-10 text-muted-foreground" />}
      title={`No results for "${query}"`}
      description="Try different keywords or check your spelling."
    />
  );
}

Full page empty state#

TSX

<div className="flex items-center justify-center min-h-[400px]">
  <EmptyState
    icon={<Database className="size-12 text-muted-foreground" />}
    title="No data available"
    description="Connect a data source to start exploring your metrics."
  >
    <div className="flex gap-2">
      <Button>Connect source</Button>
      <Button variant="outline">Learn more</Button>
    </div>
  </EmptyState>
</div>

Props#

Prop	Type	Required	Description
`title`	`string`	Yes	Primary heading text.
`description`	`string`	Yes	Supporting descriptive text below the title.
`icon`	`ReactNode`	Yes	Icon or illustration shown above the title.
`children`	`ReactNode`	No	Optional call-to-action content (buttons, links).
`className`	`string`	No	Additional CSS classes on the container.

Was this page helpful?