सामग्री पर जाएँ

रिक्त

कोई परिणाम न मिलने वाली खोजों, खाली डैशबोर्डों और पहली बार चलने वाली स्क्रीन के लिए एक प्लेसहोल्डर — आइकन, शीर्षक और क्रिया नियोब्रुटलिस्ट बॉर्डर में फ्रेम की गई।

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.json
npx shadcn@latest add https://neobrutalism.com/r/base/empty.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/empty.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/empty.json

निम्नलिखित कोड को अपने प्रोजेक्ट में कॉपी और पेस्ट करें.

components/ui/empty.tsx
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 कंपोनेंट्स को रैप करता है.

PropTypeDefault
classNamestring
<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>

EmptyHeader

EmptyHeader कंपोनेंट खाली स्टेट के मीडिया, टाइटल और विवरण को रैप करता है.

PropTypeDefault
classNamestring
<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>

EmptyMedia

खाली स्टेट का मीडिया, जैसे आइकन या इमेज, दिखाने के लिए EmptyMedia कंपोनेंट का उपयोग करें. आप इसका उपयोग अवतार जैसे अन्य कंपोनेंट दिखाने के लिए भी कर सकते हैं.

PropTypeDefault
variant"default" | "icon"default
classNamestring
<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>
<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>

EmptyTitle

खाली स्टेट का टाइटल दिखाने के लिए EmptyTitle कंपोनेंट का उपयोग करें.

PropTypeDefault
classNamestring
<EmptyTitle>No data</EmptyTitle>

EmptyDescription

खाली स्टेट का विवरण दिखाने के लिए EmptyDescription कंपोनेंट का उपयोग करें.

PropTypeDefault
classNamestring
<EmptyDescription>You do not have any notifications.</EmptyDescription>

EmptyContent

खाली स्टेट का कंटेंट, जैसे बटन, इनपुट या लिंक, दिखाने के लिए EmptyContent कंपोनेंट का उपयोग करें.

PropTypeDefault
classNamestring
<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>