Empty

An empty state: an icon, a title, a line of help and the action that fills the space.

Installation

npx rasengan-ui add empty

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/empty.json

Usage

import { FolderOpenIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
 
export function Usage() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FolderOpenIcon />
        </EmptyMedia>
        <EmptyTitle>No projects yet</EmptyTitle>
        <EmptyDescription>Create a project to start building with your team.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>New project</Button>
      </EmptyContent>
    </Empty>
  );
}

Variants

default has no frame, for a page or a panel that already has one; outline draws a dashed border, for drop zones and empty lists. EmptyMedia variant="icon" puts an icon on a muted tile; default shows the media as given (an illustration, avatars).

Villages

The title is in the village's display face and heading case: capitals in Iwa.

Accessibility

• Plain <div>s. EmptyTitle is a <div> too: when the empty state stands for a whole page or section, render a heading inside it.
• Put the action that fills the space first in EmptyContent, so keyboard users reach it first.

API reference

Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription and EmptyContent, each a <div> taking its props and className.

emptyVariants and emptyMediaVariants return their classes.