Empty
An empty state with a title and explanation.
Upstream documentationExamples
No items
An empty-state specimen.
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Empty
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/empty.json'Usage
A complete example using the installed component and hook paths.
Empty usage
"use client";import { InboxIcon } from "@/lib/icons";import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";const EmptyPreview = function EmptyPreview() { return ( <Empty className="border"> <EmptyHeader> <EmptyMedia variant="icon"> <InboxIcon /> </EmptyMedia> <EmptyTitle>No items</EmptyTitle> <EmptyDescription>An empty-state specimen.</EmptyDescription> </EmptyHeader> </Empty> ); };export default function Demo() { return <EmptyPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Empty
Empty props
React.ComponentProps<"div">EmptyHeader
EmptyHeader props
React.ComponentProps<"div">EmptyTitle
EmptyTitle props
React.ComponentProps<"div">EmptyDescription
EmptyDescription props
React.ComponentProps<"p">EmptyContent
EmptyContent props
React.ComponentProps<"div">EmptyMedia
EmptyMedia props
React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>- variant
- "default"