रिक्त
कोई परिणाम न मिलने वाली खोजों, खाली डैशबोर्डों और पहली बार चलने वाली स्क्रीन के लिए एक प्लेसहोल्डर — आइकन, शीर्षक और क्रिया नियोब्रुटलिस्ट बॉर्डर में फ्रेम की गई।
import { IconFolderCode } from "@tabler/icons-react"
import { ArrowUpRightIcon } from "lucide-react"
एम्प्टी स्टेट तब जगह भरता है जब रेंडर करने को कुछ न हो — आइकन या अवतार का स्लॉट, टाइटल, विवरण और call to action। यह कंपोज़ेबल, डिपेंडेंसी-मुक्त divs का सेट है (नीचे कोई प्रिमिटिव नहीं), नियोब्रूटलिस्ट रेसिपी: मोटे बॉर्डर और बोल्ड हेडिंग टाइप।
इसे इन स्थितियों में चुनें:
- ज़ीरो-रिज़ल्ट सर्च और फ़िल्टर — बताएँ सूची क्यों खाली है और क्वेरी रीसेट या व्यापक करने का रास्ता दें।
- फ़र्स्ट-रन स्क्रीन — "No projects yet" के साथ अगले कदम पर create बटन।
- खाली इनबॉक्स और कतार — पुष्टि करें कि खाली सूची सफलता है, एरर नहीं।
इंस्टॉलेशन#
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/empty.jsonnpx shadcn@latest add https://neobrutalism.com/r/base/empty.jsonyarn dlx shadcn@latest add https://neobrutalism.com/r/base/empty.jsonbunx --bun shadcn@latest add https://neobrutalism.com/r/base/empty.json
निम्नलिखित कोड को अपने प्रोजेक्ट में कॉपी और पेस्ट करें.
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
function Empty({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty"
className={cn(
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded border-2 bg-card p-6 text-center text-balance",
className
)}
{...props}
/>
)
}
function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty-header"
className={cn("flex max-w-sm flex-col items-center gap-2", className)}
{...props}
/>
)
}
const emptyMediaVariants = cva(
"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
{
variants: {
variant: {
default: "bg-transparent",
icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
},
},
defaultVariants: {
variant: "default",
},
}
)
function EmptyMedia({
className,
variant = "default",
...props
}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
return (
<div
data-slot="empty-icon"
data-variant={variant}
className={cn(emptyMediaVariants({ variant, className }))}
{...props}
/>
)
}
function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty-title"
className={cn(
"cn-font-heading text-sm font-medium tracking-tight",
className
)}
{...props}
/>
)
}
function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
return (
<div
data-slot="empty-description"
className={cn(
"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
className
)}
{...props}
/>
)
}
function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty-content"
className={cn(
"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
className
)}
{...props}
/>
)
}
export {
Empty,
EmptyHeader,
EmptyTitle,
EmptyDescription,
EmptyContent,
EmptyMedia,
}
अपने प्रोजेक्ट सेटअप के अनुसार इंपोर्ट पाथ अपडेट करें.
उपयोग#
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty"<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<Icon />
</EmptyMedia>
<EmptyTitle>No data</EmptyTitle>
<EmptyDescription>No data found</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>Add data</Button>
</EmptyContent>
</Empty>कंपोज़िशन#
Empty स्टेट बनाने के लिए निम्नलिखित कंपोज़िशन का उपयोग करें:
Empty
├── EmptyHeader
│ ├── EmptyMedia
│ ├── EmptyTitle
│ └── EmptyDescription
└── EmptyContentउदाहरण#
Outline#
आउटलाइन वाला खाली स्टेट बनाने के लिए border यूटिलिटी क्लास का उपयोग करें.
import { IconCloud } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"Background#
खाली स्टेट में बैकग्राउंड जोड़ने के लिए bg-* और bg-gradient-* यूटिलिटीज़ का उपयोग करें.
import { IconBell } from "@tabler/icons-react"
import { RefreshCcwIcon } from "lucide-react"
Avatar#
खाली स्टेट में अवतार दिखाने के लिए EmptyMedia कंपोनेंट का उपयोग करें.
import {
Avatar,
AvatarFallback,Avatar Group#
खाली स्टेट में अवतार समूह दिखाने के लिए EmptyMedia कंपोनेंट का उपयोग करें.
import { PlusIcon } from "lucide-react"
import {InputGroup#
आप EmptyContent कंपोनेंट में InputGroup कंपोनेंट जोड़ सकते हैं.
import { SearchIcon } from "lucide-react"
import {RTL#
Neobrutalism में RTL सपोर्ट सक्षम करने के लिए, RTL कॉन्फ़िगरेशन गाइड देखें.
"use client"
import * as React from "react"एक्सेसिबिलिटी#
एम्प्टी स्टेट प्रेजेंटेशनल है — सादे div, कोई role या कीबोर्ड व्यवहार नहीं, इसलिए वायर करने को कुछ नहीं। सजावटी EmptyMedia आइकन पर aria-hidden="true" लगाएँ, और EmptyContent में एक्शन असली Button या लिंक रखें ताकि वे फ़ोकस-योग्य रहें। जब async ऑपरेशन के बाद एम्प्टी स्टेट कंटेंट बदल दे (खोज में कोई परिणाम नहीं), live region से घोषणा करें — DOM स्वैप खुद स्क्रीन रीडर के लिए चुप रहता है।
API रेफ़रेंस#
Empty#
खाली स्टेट का मुख्य कंपोनेंट. EmptyHeader और EmptyContent कंपोनेंट्स को रैप करता है.
| Prop | Type | Default |
|---|---|---|
className | string |
<Empty>
<EmptyHeader />
<EmptyContent />
</Empty>EmptyHeader#
EmptyHeader कंपोनेंट खाली स्टेट के मीडिया, टाइटल और विवरण को रैप करता है.
| Prop | Type | Default |
|---|---|---|
className | string |
<EmptyHeader>
<EmptyMedia />
<EmptyTitle />
<EmptyDescription />
</EmptyHeader>EmptyMedia#
खाली स्टेट का मीडिया, जैसे आइकन या इमेज, दिखाने के लिए EmptyMedia कंपोनेंट का उपयोग करें. आप इसका उपयोग अवतार जैसे अन्य कंपोनेंट दिखाने के लिए भी कर सकते हैं.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "icon" | default |
className | string |
<EmptyMedia variant="icon">
<Icon />
</EmptyMedia><EmptyMedia>
<Avatar>
<AvatarImage src="..." />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
</EmptyMedia>EmptyTitle#
खाली स्टेट का टाइटल दिखाने के लिए EmptyTitle कंपोनेंट का उपयोग करें.
| Prop | Type | Default |
|---|---|---|
className | string |
<EmptyTitle>No data</EmptyTitle>EmptyDescription#
खाली स्टेट का विवरण दिखाने के लिए EmptyDescription कंपोनेंट का उपयोग करें.
| Prop | Type | Default |
|---|---|---|
className | string |
<EmptyDescription>You do not have any notifications.</EmptyDescription>EmptyContent#
खाली स्टेट का कंटेंट, जैसे बटन, इनपुट या लिंक, दिखाने के लिए EmptyContent कंपोनेंट का उपयोग करें.
| Prop | Type | Default |
|---|---|---|
className | string |
<EmptyContent>
<Button>Add Project</Button>
</EmptyContent>