Placeholder

An inline marker for sample, not-yet-real data.

Marks a spot where real data isn’t wired up yet. The muted colour plus animate-pulse says “this value is meant to be replaced”, so a template never gets shared with sample numbers mistaken for real ones.

export const client = "only";

import { Placeholder } from "@squadbase/vantage/components";

export default function Example() {
  return (
    <div className="flex w-[30rem] flex-col gap-4 text-sm">
      <p>
        今月の売上は <Placeholder>¥1,240,000</Placeholder> でした。
      </p>

      <div>
        <div className="text-muted-foreground">新規顧客</div>
        <Placeholder className="text-2xl font-medium tracking-tight">128</Placeholder>
      </div>

      <p className="text-muted-foreground">
        データソースを繋ぐまでの仮置き:{" "}
        <Placeholder className="font-mono">2026-07-24</Placeholder>
      </p>
    </div>
  );
}

import { Placeholder } from "@squadbase/vantage/components";

PropType

children?ReactNode

The sample value — text or elements.

TypeReactNode

className?string

Override size and weight (e.g. `text-2xl font-medium`).

Typestring

Any remaining props go straight to the <span>.

Placeholder or Skeleton

	Use for	Element
`Skeleton`	Loading — it disappears when data arrives	block `<div>`
`Placeholder`	A stand-in value — it stays until you replace it	inline `<span>`

Being inline, it is safe inside a sentence — in a <p> or a heading. Skeleton is a block element and breaks the line if you mix it into running text.

<p>
  Revenue this month was <Placeholder>$12,400</Placeholder>.
</p>