Empty

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

---
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import { Icon } from "@/components/ui/icon"
---

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon name="folder-code" />
    </EmptyMedia>
    <EmptyTitle>No Projects Yet</EmptyTitle>
    <EmptyDescription>
      You haven&apos;t created any projects yet. Get started by creating your
      first project.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <div class="flex gap-2">
      <Button>Create Project</Button>
      <Button variant="outline">Import Project</Button>
    </div>
  </EmptyContent>
  <Button variant="link" class="text-muted-foreground" size="sm" href="#">
    Learn More <Icon name="arrow-up-right" />
  </Button>
</Empty>

Installation

To install the empty component, run the following command:

pnpm dlx shadcn@latest add @fulldev-ui/empty

Usage

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

<Empty>
  <EmptyMedia>
    <Icon name="inbox" />
  </EmptyMedia>
  <EmptyTitle>No results</EmptyTitle>
  <EmptyDescription> Try adjusting your filters. </EmptyDescription>
</Empty>