Empty state

Free

A message with an icon and a next step for when there is nothing to show.

Installs components/ui/empty-state.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/empty-state.json

No members match “zed”

Check the spelling or clear the search to see everyone on the team.

When to use #

Use it for

A list, search or inbox has no content.
Teaching what to do first.

Skip it when

Content is only loading; use a skeleton.
An error occurred; use an alert.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/empty-state.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { SearchX } from "lucide-react"
import { EmptyState } from "@/components/ui/empty-state"

export function EmptyStateDemo() {
  return (
    <EmptyState
      icon={<SearchX aria-hidden="true" />}
      title="No members match “zed”"
      description="Check the spelling or clear the search to see everyone on the team."
    />
  );
}

API reference #

EmptyState

component

Also accepts the native props of its root element and a ref.

PropTypeDefault

title *string—

descriptionstring—

iconReactNode—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.