jengacore components · @jengacore/empty-state

EmptyState

One sentence of what will appear here and one action. No illustrations.

Install

terminal

npx shadcn@latest add @jengacore/empty-state

Without the namespace configured: npx shadcn@latest add https://ui.jengacore.com/r/<new-york-v4|base-nova>/empty-state.json

Registry dependencies

@jengacore/theme

Source

components/jc/empty-state.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

/** One sentence of what will appear here, and one action. No illustrations. */
export function EmptyState({
  title,
  description,
  action,
  icon: Icon,
  className,
}: {
  title: string
  description?: React.ReactNode
  action?: React.ReactNode
  icon?: React.ComponentType<{ className?: string }>
  className?: string
}) {
  return (
    <div data-slot="empty-state" className={cn("flex flex-col items-center gap-2 px-6 py-12 text-center", className)}>
      {Icon ? <Icon className="mb-1 size-5 stroke-[1.75] text-muted-foreground" /> : null}
      <p className="text-[15px] font-semibold">{title}</p>
      {description ? <p className="max-w-sm text-[13px] text-muted-foreground">{description}</p> : null}
      {action ? <div className="mt-2">{action}</div> : null}
    </div>
  )
}