Empty

Installation#

1. Install the dependencies

   npm install class-variance-authority cn

2. Copy the source into your project

   components/ui/empty.tsx

   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-xl border-dashed p-6 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-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",      },    },    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(        "font-heading text-sm 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-2.5 text-sm text-balance",        className      )}      {...props}    />  )}export {  Empty,  EmptyHeader,  EmptyTitle,  EmptyDescription,  EmptyContent,  EmptyMedia,}

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

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

Examples#