Empty Value Placeholder

Use Empty Value Placeholder for pretty / display “no value” treatment: readPretty fields, Descriptions, and table display cells. It is a separate registry item from the icon-leading text fields (no Lucide dependency).

Do not use it (or a literal —) inside editable, readOnly, or invalid field chrome — those stay blank. Paint invalid required-empty with kit Form / Editable Table severity, not a dash. Pattern pair: Form (Formily) — When To Use.

Installing

pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/empty-value-placeholder.json

npx shadcn@latest add https://ui.isaacfei.com/r/empty-value-placeholder.json

yarn dlx shadcn@latest add https://ui.isaacfei.com/r/empty-value-placeholder.json

bun x shadcn@latest add https://ui.isaacfei.com/r/empty-value-placeholder.json

With a namespace: npx shadcn@latest add @f-ui/empty-value-placeholder.

Usage

import {
  EmptyValuePlaceholder,
  isEmptyDisplayValue,
} from '@/components/f-ui/empty-value-placeholder';

{
  isEmptyDisplayValue(name) ? <EmptyValuePlaceholder /> : name;
}

Examples

Default em dash, explicit em dash children, and custom label text.

"use client";

import { EmptyValuePlaceholder } from "@/components/f-ui/empty-value-placeholder";

export function EmptyValuePlaceholderDemo() {
  return (
    <div className="max-w-sm space-y-4">
      <div className="space-y-1">
        <p className="text-muted-foreground text-xs">Default (Unicode em dash)</p>
        <EmptyValuePlaceholder />
      </div>
      <div className="space-y-1">
        <p className="text-muted-foreground text-xs">Explicit em dash children</p>
        <EmptyValuePlaceholder>{"\u2014"}</EmptyValuePlaceholder>
      </div>
      <div className="space-y-1">
        <p className="text-muted-foreground text-xs">Custom text</p>
        <EmptyValuePlaceholder>Empty</EmptyValuePlaceholder>
      </div>
    </div>
  );
}

API Reference

• children: rendered content; defaults to an em dash (—) in muted small text.
• className: merged onto the wrapper span.
• isEmptyDisplayValue(value) (exported function): true for null / undefined, blank strings, NaN, or empty arrays; false otherwise.