NAMCHE UI

Empty

A placeholder for a list or panel with nothing in it yet, with room for a call to action.

No API keys yet
Generate a key to authenticate requests against your Machermo endpoints.

Install

pnpm dlx shadcn@latest add @namche/empty

Usage

import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from '@/components/ui/empty';

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <KeyRoundIcon />
    </EmptyMedia>
    <EmptyTitle>No API keys yet</EmptyTitle>
    <EmptyDescription>
      Generate a key to authenticate requests against your endpoints.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button size="sm">Generate API key</Button>
  </EmptyContent>
</Empty>

EmptyMedia takes variant="icon" to wrap an icon in a small muted square, or variant="default" for a bare avatar, logo, or illustration. EmptyContent holds the follow-up action — usually a single button.

On this page