Empty

Component

Preview

Preview solid

Usage

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

export function EmptyDemo() {
return (
  <Empty class="h-40">
    <EmptyImage>
      <IconFolderOff class="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/s/empty.json

pnpm

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

bun

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

Manual

components/ui/empty.tsx

import { type ComponentProps, splitProps } from "solid-js"
import { cn } from "@/lib/utils"
import { IconFolderOff } from "@tabler/icons-solidjs"

export interface EmptyProps extends ComponentProps<"div"> {}

export const Empty = (props: EmptyProps) => {
  const [local, rest] = splitProps(props, ["class"])

  return (
    <div
      class={cn("flex flex-col items-center text-center", local.class)}
      {...rest}
    />
  )
}

export interface EmptyImageProps extends ComponentProps<"div"> {}

export const EmptyImage = (props: EmptyImageProps) => {
  const [local, rest] = splitProps(props, ["class"])

  return (
    <div
      class={cn("flex max-w-[200px] items-center justify-center", local.class)}
      {...rest}
    />
  )
}

export interface EmptyTitleProps extends ComponentProps<"p"> {}

export const EmptyTitle = (props: EmptyTitleProps) => {
  const [local, rest] = splitProps(props, ["class"])

  return (
    <p
      class={cn("text-sm font-medium leading-none", local.class)}
      {...rest}
    />
  )
}

export interface EmptyDescriptionProps extends ComponentProps<"p"> {}

export const EmptyDescription = (props: EmptyDescriptionProps) => {
  const [local, rest] = splitProps(props, ["class"])

  return (
    <p
      class={cn("text-sm text-muted-foreground", local.class)}
      {...rest}
    />
  )
}

export { IconFolderOff }