# Empty State 03

> A simple empty state block

A shadcn/ui block from the [@shadcnui-blocks](https://shadcnui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnui-blocks/empty-state-03).

- Page, with a live preview: https://shadcn.exchange/r/shadcnui-blocks/empty-state-03
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnui-blocks/empty-state-03-light-fdcc93b08b8495fa.png
- Registry item: https://shadcnui-blocks.com/r/empty-state-03.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnui-blocks.com/r/empty-state-03.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `tabs`, `button`

## Files

### `src/registry/blocks/radix/empty-state-03/components/empty-state.tsx`

```tsx
import {
  BadgeDollarSign,
  CreditCard,
  ImportIcon,
  PlusIcon,
  Receipt,
} from "lucide-react";
import { Button } from "@/registry/bases/radix/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/registry/bases/radix/ui/empty";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/registry/bases/radix/ui/tabs";
import { cn } from "@/lib/utils";

export default function EmptyState() {
  return (
    <div className="px-6 py-10">
      <div className="mx-auto max-w-lg">
        <Tabs defaultValue="invoices">
          <TabsList
            className={cn(
              "mb-3 bg-transparent p-0",
              "*:px-3 *:text-muted-foreground *:data-[state=active]:bg-muted *:data-[state=active]:text-foreground *:data-[state=active]:shadow-none"
            )}
          >
            <TabsTrigger value="invoices">
              <Receipt /> Invoices
            </TabsTrigger>
            <TabsTrigger value="payments">
              <BadgeDollarSign /> Payments
            </TabsTrigger>
            <TabsTrigger value="subscriptions">
              <CreditCard /> Subscriptions
            </TabsTrigger>
          </TabsList>

          <TabsContent value="invoices">
            <Empty className="rounded-xl border bg-muted/30 py-12">
              <EmptyHeader>
                <EmptyMedia variant="icon">
                  <Receipt />
                </EmptyMedia>
                <EmptyTitle>No Invoices Yet</EmptyTitle>
                <EmptyDescription>
                  You haven&apos;t created any invoices yet. Get started by
                  creating your first invoice.
                </EmptyDescription>
              </EmptyHeader>
              <EmptyContent>
                <div className="flex flex-wrap gap-2 *:mx-auto">
                  <Button>
                    <PlusIcon /> Create Invoice
                  </Button>
                  <Button variant="outline">
                    <ImportIcon /> Import Invoice
                  </Button>
                </div>
              </EmptyContent>
            </Empty>
          </TabsContent>

          <TabsContent value="payments">
            <Empty className="rounded-xl border bg-muted/30 py-12">
              <EmptyHeader>
                <EmptyMedia variant="icon">
                  <BadgeDollarSign />
                </EmptyMedia>
                <EmptyTitle>No Payments Yet</EmptyTitle>
                <EmptyDescription>
                  You haven&apos;t received any payments yet. Payments will
                  appear here once your invoices are paid.
                </EmptyDescription>
              </EmptyHeader>
              <EmptyContent>
                <div className="flex flex-wrap gap-2 *:mx-auto">
                  <Button>
                    <PlusIcon /> Record Payment
                  </Button>
                </div>
              </EmptyContent>
            </Empty>
          </TabsContent>

          <TabsContent value="subscriptions">
            <Empty className="rounded-xl border bg-muted/30 py-12">
              <EmptyHeader>
                <EmptyMedia variant="icon">
                  <CreditCard />
                </EmptyMedia>
                <EmptyTitle>No Subscriptions Yet</EmptyTitle>
                <EmptyDescription>
                  You don&apos;t have any active subscriptions. Create recurring
                  billing plans for your customers.
                </EmptyDescription>
              </EmptyHeader>
              <EmptyContent>
                <div className="flex flex-wrap gap-2 *:mx-auto">
                  <Button>
                    <PlusIcon /> Create Subscription
                  </Button>
                </div>
              </EmptyContent>
            </Empty>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}
```