Skip to content
ui.anuragroy.dev

Browse components

← All components

Empty State

Empty state placeholder with icon, title, description, and actions.

Install
npx shadcn@latest add https://ui.anuragroy.dev/r/empty-state.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal
npx shadcn@latest add https://ui.anuragroy.dev/r/empty-state.json

GitHub fallback if the website is down:

Terminal
npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/empty-state.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/empty-state.

Import
import {  EmptyState,  EmptyStateActions,  EmptyStateDescription,  EmptyStateIcon,  EmptyStateTitle} from "@/components/ui/empty-state"
example.tsx
import { Inbox } from "lucide-react"import { Button } from "@/components/ui/button"import {  EmptyState,  EmptyStateActions,  EmptyStateDescription,  EmptyStateIcon,  EmptyStateTitle,} from "@/components/ui/empty-state"export function Example() {  return (    <EmptyState>      <EmptyStateIcon>        <Inbox />      </EmptyStateIcon>      <EmptyStateTitle>No results</EmptyStateTitle>      <EmptyStateDescription>        Try a different filter or clear your search.      </EmptyStateDescription>      <EmptyStateActions>        <Button variant="secondary">Reset filters</Button>      </EmptyStateActions>    </EmptyState>  )}

API Reference

EmptyState

Centered empty-state stack.

PropTypeDefault
classNamestring—