empty-state

block

Raw empty state primitive with icon, title, description, and call-to-action slots. No brand opinion. Use nyuchi-empty-state (Layer 3) for the branded ecosystem version with mineral accents.

Source code

No interactive demo is registered for this component yet — the source is shown directly.

import * as React from "react"
import { Button } from "@/components/ui/button"
import { Inbox } from "@/lib/icons"

interface EmptyStateProps {
  icon?: React.ReactNode
  title?: string
  description?: string
  action?: {
    label: string
    href: string
  }
}

function EmptyState({
  icon,
  title = "Nothing here yet",
  description = "Get started by creating your first item.",
  action,
}: EmptyStateProps) {
  return (
    <div data-slot="empty-state" data-portal="https://design.nyuchi.com/components/empty-state" className="flex flex-col items-center justify-center px-4 py-16 text-center">
      {/* Icon */}
      <div className="mb-4 flex size-16 items-center justify-center rounded-[var(--radius-lg,14px)] bg-muted">
        {icon ?? <Inbox className="size-7 text-muted-foreground" />}
      </div>

      {/* Title */}
      <h2 className="font-serif text-lg font-semibold text-foreground">{title}</h2>

      {/* Description */}
      <p className="mt-1 max-w-sm text-sm text-muted-foreground">{description}</p>

      {/* Action */}
      {action && (
        <Button className="mt-6" asChild>
          <a href={action.href}>{action.label}</a>
        </Button>
      )}
    </div>
  )
}

export { EmptyState }
export type { EmptyStateProps }

Variants & props

The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.

API tester

Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.

GET/api/v1/ui/empty-state

Install

npx shadcn@latest add https://mzizi.dev/api/v1/ui/empty-state

Dependencies

button

Source path

components/blocks/empty-state.tsx