dotUI

Empty

An empty state placeholder for when there's no content to display.

Overview
Examples
No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FolderCodeIcon />
    </EmptyMedia>
  </EmptyHeader>
  <EmptyTitle>No Projects Yet</EmptyTitle>
  <EmptyDescription>
    You haven't created any projects yet. Get started by creating your first project.
  </EmptyDescription>
  <EmptyContent>
    <Button>Create Project</Button>
  </EmptyContent>
</Empty>

Installation

npx shadcn@latest add @dotui/empty

Usage

import { Empty } from "@/components/ui/empty";
<Empty>
  <EmptyIcon>
    <FolderIcon />
  </EmptyIcon>
  <EmptyTitle>No projects</EmptyTitle>
  <EmptyDescription>Get started by creating a new project.</EmptyDescription>
</Empty>

API Reference

Missing description.

Supports all div attributes.

On this page

Last updated on 1/13/2026

On this page

dotUI

Bringing singularity to the web.

Community

Built with passion by @mehdibha.