Empty

Empty state example: a layout with header, media, title, description and content slots, centered inside a padded box. The media slot has a plain variant and an icon variant on a muted tile.

pnpm dlx shadcn add @01orbital/empty

File

import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

function Empty({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="empty"
      className={cn(
        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-2xl border-dashed p-12 text-center text-balance",
        className
      )}
      {...props}
    />
  )
}

function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="empty-header"
      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
      {...props}
    />
  )
}

const emptyMediaVariants = cva(
  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        icon: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted text-foreground [&_svg:not([class*='size-'])]:size-5",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function EmptyMedia({
  className,
  variant = "default",
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
  return (
    <div
      data-slot="empty-icon"
      data-variant={variant}
      className={cn(emptyMediaVariants({ variant, className }))}
      {...props}
    />
  )
}

function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="empty-title"
      className={cn("text-lg font-medium tracking-tight", className)}
      {...props}
    />
  )
}

function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <div
      data-slot="empty-description"
      className={cn(
        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
        className
      )}
      {...props}
    />
  )
}

function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="empty-content"
      className={cn(
        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
        className
      )}
      {...props}
    />
  )
}

export {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
}

import { ArrowUpRightIcon, FolderIcon } from "@phosphor-icons/react/dist/ssr"

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

// The copy: change text here, not in the markup.
const COPY = {
  title: "No Projects Yet",
  description:
    "You haven't created any projects yet. Get started by creating your first project.",
  primary: "Create Project",
  secondary: "Import Project",
  learn: "Learn More",
} as const

export default function EmptyDemo() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FolderIcon />
        </EmptyMedia>
        <EmptyTitle>{COPY.title}</EmptyTitle>
        <EmptyDescription>{COPY.description}</EmptyDescription>
      </EmptyHeader>
      <EmptyContent className="flex-row justify-center gap-2">
        <Button>{COPY.primary}</Button>
        <Button variant="outline">{COPY.secondary}</Button>
      </EmptyContent>
      <Button
        variant="link"
        render={<a href="#" />}
        className="text-muted-foreground"
        size="sm"
        nativeButton={false}
      >
        {COPY.learn} <ArrowUpRightIcon />
      </Button>
    </Empty>
  )
}

Examples

New

empty-invoice-template

Invoice Template

Empty state example: a dashed-edge empty state with a button that downloads a CSV import template. Shows a no-data screen with a next action.

pnpm dlx shadcn add @01orbital/empty-invoice-template

npx shadcn add @01orbital/empty-invoice-template

yarn shadcn add @01orbital/empty-invoice-template

bunx --bun shadcn add @01orbital/empty-invoice-template

File

"use client"

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

// The copy: change text here, not in the markup.
const COPY = {
  reference: "INV—0001",
  eyebrow: "Zaira Ledger",
  title: "Your first invoice starts here.",
  description:
    "No invoices for Isaura Joinery yet. Download a CSV with the columns you’ll need to import your first batch.",
  cta: "Download invoice template",
  note: "CSV · Seven columns · No customer data included",
  template:
    "invoice_number,client_name,issue_date,due_date,description,amount,currency\n",
} as const

/** An Empty state with a dashed edge and a button that downloads a CSV import template. */
export default function EmptyInvoiceTemplate() {
  return (
    <div className="flex w-full items-center justify-center rounded-xl border bg-background px-3 py-8 text-foreground [--radius:0.75rem] sm:px-6 dark:[--muted-foreground:color-mix(in_oklch,_#ffffff_70%,_#0a1015)] dark:[--radius:0.75rem]">
      <Empty className="w-full max-w-md rounded-xl border border-dashed bg-card px-6 py-9 text-card-foreground">
        <EmptyHeader>
          <EmptyMedia className="mb-3 rounded-md border bg-muted px-5 py-3 font-mono text-xs tracking-widest">
            {COPY.reference}
          </EmptyMedia>
          <Eyebrow>{COPY.eyebrow}</Eyebrow>
          <EmptyTitle className="mt-2 text-2xl">{COPY.title}</EmptyTitle>
          <EmptyDescription className="mt-2">
            {COPY.description}
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button
            className="mt-2 rounded-md px-5"
            onClick={() => {
              const url = URL.createObjectURL(
                new Blob([COPY.template], { type: "text/csv;charset=utf-8" })
              )
              const link = document.createElement("a")
              link.href = url
              link.download = "zaira-invoice-template.csv"
              link.click()
              setTimeout(() => URL.revokeObjectURL(url), 1000)
            }}
          >
            {COPY.cta}
          </Button>
          <p className="text-xs text-muted-foreground">{COPY.note}</p>
        </EmptyContent>
      </Empty>
    </div>
  )
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

Dependencies

npm: class-variance-authority, cn. The CLI installs them for you.

No other registry pieces.

Empty

ExamplesCopy Anchor Link

Invoice TemplateNew

DependenciesCopy Anchor Link

Examples

New

Dependencies