PlumUI

Empty

Empty states that guide the next action. The stacked media fans out when you hover the block.

Data Display
No projects yet
Import a Git repository or start from a template to deploy your first project.

Playground

Tweak the props, the preview and the code follow.

No projects yet
Create a project to deploy your first app. It takes about a minute.
Props
<Empty className="border">
  <EmptyHeader>
    <EmptyMedia variant="stack">
      <FolderOpen />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>Create a project to deploy your first app.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">New project</Button>
  </EmptyContent>
</Empty>

Installation

npx @plumsydev/plum-ui add empty

Also pulls in button automatically.

Usage

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="stack">
      <FolderGit2 />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>Create your first project to get started.</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>New project</Button>
  </EmptyContent>
</Empty>

Examples

No results

EmptyMedia variant="icon" for a quieter look.

No results for “dark mde”
Did you mean dark mode? Try fewer keywords or check your spelling.

Empty, loading, ready

Swap between states with a soft crossfade.

No deployments yet
Push to your main branch or deploy manually to see it here.

API Reference

EmptyMedia

PropTypeDefault
variant

Plain media, an icon tile, or a fanned stack of tiles.

"default" | "icon" | "stack""default"

Notes

  • Empty is dashed-border ready: add border to show it, or leave it borderless inside a card.
PreviousDropdown MenuNextExpandable