Empty

Component

Preview

Preview react

Usage

import { Empty, EmptyDescription, EmptyImage, EmptyTitle } from "@/components/ui/empty"
import { IconFolderOff } from "@tabler/icons-react"

export function EmptyDemo() {
return (
  <Empty className="h-40">
    <EmptyImage>
      <IconFolderOff className="h-12 w-12 text-muted-foreground" />
    </EmptyImage>
    <EmptyTitle>No files found</EmptyTitle>
    <EmptyDescription>
      Try adjusting your search or filter to find what you're looking for.
    </EmptyDescription>
  </Empty>
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/empty.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/empty.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/empty.json

Manual

components/ui/empty.tsx

import { type ComponentProps, forwardRef } from "react"
import { cn } from "@/lib/utils"
import { IconFolderOff } from "@tabler/icons-react"

const Empty = forwardRef<HTMLDivElement, ComponentProps<"div">>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      className={cn("flex flex-col items-center text-center", className)}
      {...props}
    />
  )
})
Empty.displayName = "Empty"

const EmptyImage = forwardRef<HTMLDivElement, ComponentProps<"div">>(({ className, ...props }, ref) => {
  return <div ref={ref} className={cn("flex max-w-[200px] items-center justify-center", className)} {...props} />
})
EmptyImage.displayName = "EmptyImage"

const EmptyTitle = forwardRef<HTMLParagraphElement, ComponentProps<"p">>(({ className, ...props }, ref) => {
  return <p ref={ref} className={cn("text-sm font-medium leading-none", className)} {...props} />
})
EmptyTitle.displayName = "EmptyTitle"

const EmptyDescription = forwardRef<HTMLParagraphElement, ComponentProps<"p">>(({ className, ...props }, ref) => {
  return <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
})
EmptyDescription.displayName = "EmptyDescription"

export { Empty, EmptyDescription, EmptyImage, EmptyTitle, IconFolderOff }