Components
Empty Value Placeholder
Muted em dash (or custom children) for empty read-only cells and form readouts—plus a small isEmptyDisplayValue helper.
Use Empty Value Placeholder anywhere you need a consistent “no value” treatment: tables, detail panels, or the readout line under controlled inputs. It is a separate registry item from the icon-leading text fields (no Lucide dependency).
Empty Value Placeholder
Installation
Registry item empty-value-placeholder.
pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/empty-value-placeholder.jsonnpx shadcn@latest add https://ui.isaacfei.com/r/empty-value-placeholder.jsonyarn dlx shadcn@latest add https://ui.isaacfei.com/r/empty-value-placeholder.jsonbun x shadcn@latest add https://ui.isaacfei.com/r/empty-value-placeholder.jsonWith 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;
}Example
Default em dash, explicit em dash children, and custom label text.
Default (Unicode em dash)
—Explicit em dash children
—Custom text
Empty"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):truefornull/undefined, blank strings,NaN, or empty arrays;falseotherwise.