Dokumentation (english)
Components: Shadcn UI

Empty

Understand the design system and contribute to it

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview
No automation flows yet
Trigger critical workflows the moment an incident occurs. Start with one of our templates.

Prop reference

Auto-generated from the component source

Empty

  • className

React.ComponentProps<"div">

EmptyContent

  • className

React.ComponentProps<"div">

EmptyDescription

  • className

React.ComponentProps<"p">

EmptyHeader

  • className

React.ComponentProps<"div">

EmptyMedia

  • className
  • variant = "default"

React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>

EmptyTitle

  • className

React.ComponentProps<"div">

Code
// owner: Sona
"use client";

import { InboxIcon } from "lucide-react";

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

export default function EmptyExample() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <InboxIcon className="size-5" />
        </EmptyMedia>
        <EmptyTitle>No automation flows yet</EmptyTitle>
        <EmptyDescription>
          Trigger critical workflows the moment an incident occurs. Start with
          one of our templates.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Create flow</Button>
        <Button variant="ghost">Browse templates</Button>
      </EmptyContent>
    </Empty>
  );
}

On this page


Command Palette

Search for a command to run...

Schnellzugriffe
STRG + KSuche
STRG + DNachtmodus / Tagmodus
STRG + LSprache ändern

Software-Details
Kompiliert vor 15 Tagen
Release: v4.0.0-production
Buildnummer: master@6fbd7b5
Historie: 13 Items