Empty
Component
Section titled “Component” Preview solid
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
Section titled “Installation”npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/empty.jsonpnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/empty.jsonbunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/empty.jsonimport { 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 }