Skip to Content
ComponentsBody

Body

Paragraph text component for readable body content. Renders as <p> by default, and as <small> for the compact variant.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.
import { Body } from "@/components/ui/body"
<Body>The quick brown fox jumps over the lazy dog.</Body>

Examples

Default vs Compact

Default (16px) — renders as <p>

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Compact (14.22px) — renders as <small>

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
<Body>Default body text</Body> <Body size="compact">Compact body text</Body>

Custom element with asChild

Body text rendered as a span
<Body asChild> <span>Body text rendered as a span</span> </Body>
Last updated on