nyuchi-empty-screen

Default empty state screen for pages with no content yet. Used across mini-apps when a feed, list, or section has zero items. Branded illustration placeholder, message, and optional CTA.

Source code

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

"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { useNyuchiHarness } from "@/lib/harness"

interface NyuchiEmptyScreenProps {
  title?: string
  description?: string
  icon?: React.ReactNode
  action?: { label: string; onClick: () => void }
  className?: string
}

export function NyuchiEmptyScreen({
  title = "Nothing here yet", description = "Content will appear here once it is available.",
  icon, action, className,
}: NyuchiEmptyScreenProps) {
  const { log, motion, LiveRegion } = useNyuchiHarness("empty-screen")
  const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])

  return (
    <div data-slot="nyuchi-empty-screen" data-portal="https://design.nyuchi.com/components/nyuchi-empty-screen" role="status" style={animStyle}
      className={cn("flex flex-col items-center justify-center py-16 px-6 text-center", className)}>
      <div className="flex size-16 items-center justify-center rounded-full bg-muted">
        {icon || (
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--color-muted-foreground)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18M9 21V9" />
          </svg>
        )}
      </div>
      <h2 className="mt-4 text-lg font-semibold text-foreground">{title}</h2>
      <p className="mt-1 max-w-sm text-sm text-muted-foreground">{description}</p>
      {action && (
        <button onClick={action.onClick}
          className="mt-6 min-h-[48px] rounded-full bg-primary px-6 text-sm font-medium text-white transition-colors hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)]">
          {action.label}
        </button>
      )}
    </div>
  )
}

export type { NyuchiEmptyScreenProps }

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/nyuchi-empty-screen

Install

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

Source path

components/ui/nyuchi-empty-screen.tsx

Source code

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

"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { useNyuchiHarness } from "@/lib/harness"

interface NyuchiEmptyScreenProps {
  title?: string
  description?: string
  icon?: React.ReactNode
  action?: { label: string; onClick: () => void }
  className?: string
}

export function NyuchiEmptyScreen({
  title = "Nothing here yet", description = "Content will appear here once it is available.",
  icon, action, className,
}: NyuchiEmptyScreenProps) {
  const { log, motion, LiveRegion } = useNyuchiHarness("empty-screen")
  const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])

  return (
    <div data-slot="nyuchi-empty-screen" data-portal="https://design.nyuchi.com/components/nyuchi-empty-screen" role="status" style={animStyle}
      className={cn("flex flex-col items-center justify-center py-16 px-6 text-center", className)}>
      <div className="flex size-16 items-center justify-center rounded-full bg-muted">
        {icon || (
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--color-muted-foreground)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18M9 21V9" />
          </svg>
        )}
      </div>
      <h2 className="mt-4 text-lg font-semibold text-foreground">{title}</h2>
      <p className="mt-1 max-w-sm text-sm text-muted-foreground">{description}</p>
      {action && (
        <button onClick={action.onClick}
          className="mt-6 min-h-[48px] rounded-full bg-primary px-6 text-sm font-medium text-white transition-colors hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)]">
          {action.label}
        </button>
      )}
    </div>
  )
}

export type { NyuchiEmptyScreenProps }