Recipes / Text Block

Text Block

<TextBlock />Stable

Canonical heading + body pair. Two variants — md (14 px semibold heading · 14 px body) and lg (20 px semibold heading · 14 px body). Set iconName + iconTone to drop in a soft tonal icon square (same tone palette as Badge), with iconPlacement choosing left or top. Drop a Badge inside the heading slot for an inline tag. CTAs are NOT part of the recipe — compose buttons at the call site.

import { TextBlock, TextBlockEyebrow, TextBlockHeading, TextBlockBody } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Variant

Align

Eyebrow

Body

Icon

Icon tone

Heading badge

Content

Marcus ReedSigned

2,847 yards · 24 TDs across six straight wins.

1<TextBlock variant="md" iconName="Trophy" iconTone="success" iconPlacement="left">
2  <TextBlockHeading>
3    Marcus Reed
4    <Badge tone="success" appearance="soft" size="xs">Signed</Badge>
5  </TextBlockHeading>
6  <TextBlockBody>
7    2,847 yards · 24 TDs across six straight wins.
8  </TextBlockBody>
9</TextBlock>

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

No Playground entry registered for TextBlock. Add it to app/_components/playground/registry.tsx.

Composition

Marcus ReedSigned

QB · Class of 2027 · 2,847 yards · 24 TDs.

1<div className="rounded-xl border border-border bg-card p-4">
2  <TextBlock
3    variant="md"
4    iconName="Trophy"
5    iconTone="success"
6    iconPlacement="left"
7  >
8    <TextBlockHeading>
9      Marcus Reed
10      <Badge tone="success" appearance="soft" size="xs">Signed</Badge>
11    </TextBlockHeading>
12    <TextBlockBody>
13      QB · Class of 2027 · 2,847 yards · 24 TDs.
14    </TextBlockBody>
15  </TextBlock>
16</div>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.