Placeholder

仮データであることを示す、インラインの目印。

まだ本物のデータを繋いでいない箇所を「仮置き」として見せます。薄い色と animate-pulse が **「ここは差し替える値だ」**という合図になり、実データを入れ忘れたまま共有してしまう事故を防ぎます。

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

仮の値。文字列でも要素でもよい。

TypeReactNode

className?string

大きさ・太さなどの上書き（例: `text-2xl font-medium`）。

Typestring

残りの props は <span> にそのまま渡ります。

`Skeleton` との違い

	用途	要素
`Skeleton`	読み込み中。実データが来れば消える	ブロック `<div>`
`Placeholder`	仮の値。実装者が差し替えるまで残る	インライン `<span>`

インライン要素なので、<p> や見出しの文中に置けます。Skeleton はブロック要素なので、文中に混ぜると行が崩れます。

<p>
  今月の売上は <Placeholder>¥1,240,000</Placeholder> でした。
</p>

Placeholder

Skeleton との違い

`Skeleton` との違い