Primitives/Empty state
Empty state
Icon, one line and a way forward, for empty tables and no-results.
- Version
- 1.0.2
- Tier
- Primitive
- Updates taken
- Minor and patch
- Files
- 1
Preview
No messages
When someone replies to an application, it lands here.
Install
In a project already set up on the contract, which is what registers the @ja3dan prefix. If yours isn't, set it up first.
bunx shadcn@latest add @ja3dan/empty-state Related items
Used by
Source
What lands in your project, read from the published item rather than the working tree.
import type { ReactNode } from "react";import { cn } from "@/lib/utils";type EmptyStateProps = { icon: ReactNode; title: string; description: string; /** A way forward: clear filters, create the first item. */ action?: ReactNode; className?: string;};/** Icon, one line, a way forward. For empty tables, lists and search results. */function EmptyState({ icon, title, description, action, className }: EmptyStateProps) { return ( <div data-slot="empty-state" className={cn("flex flex-col items-center gap-3 px-6 py-16 text-center", className)}> <span aria-hidden className="grid size-10 place-items-center rounded-full bg-muted text-subtle-foreground [&_svg]:size-5"> {icon} </span> <div className="flex flex-col gap-1"> <p className="text-sm font-medium text-foreground">{title}</p> <p className="mx-auto max-w-md text-xs text-muted-foreground">{description}</p> </div> {action} </div> );}export { EmptyState };