Empty State

Placeholder UI for empty data states with icons, descriptions, and call-to-action buttons.

Preview

Features

Large centered Phosphor icons in muted circular background
Customizable title and description text
Optional call-to-action button
Flexible className prop for custom styling
Dark mode support
Centered layout with responsive padding

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
empty-state.tsx	components/onboarding/empty-state/empty-state.tsx
types.ts	components/onboarding/empty-state/types.ts
index.ts	components/onboarding/empty-state/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add button

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. empty-state.tsx

empty-state.tsx

tsx

"use client";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { EmptyStateProps } from "./types";

2. types.ts

types.ts

tsx

import type { ComponentType } from "react";
import type { IconProps } from "@phosphor-icons/react";

type Icon = ComponentType<IconProps>;

export interface EmptyStateProps {
  icon: Icon;
  title: string;
  description: string;
  actionLabel?: string;
  onAction?: () => void;
  className?: string;
}

3. index.ts

index.ts

tsx

export { EmptyState } from "./empty-state";
export type { EmptyStateProps } from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/projects.tsx

tsx

import { EmptyState } from "@/components/onboarding/empty-state";
import { StarFour } from "@phosphor-icons/react";

function ProjectList() {
  const projects = [];

Props

Prop	Type	Default
icon	LucideIcon	required
title	string	required
description	string	required
actionLabel	string	-
onAction	() => void	-
className	string	-

Example Variants

Variant	Icon	Use Case
No projects	FolderOpen	Empty project list
No documents	FileText	Empty document library
No results	Search	Empty search results
No notifications	Bell	Empty notification center