I9kText

Text primitive for body copy and intros. Use it for any paragraph-level content that should follow the design system type scale rather than reaching for a bare <p>.

View as MarkdownView source

import { I9kText } from '@9klabs/design';

Examples

Variants

Body text keeps normal content flow.

Lede text introduces a page with a deliberate measure and quieter color.

<I9kText variant="body">Body text keeps normal content flow.</I9kText>
<I9kText variant="lede">Lede text introduces a page with a deliberate measure and quieter color.</I9kText>

Sizes

Small body text

Medium body text

Large body text

<I9kText size="sm">Small body text</I9kText>
<I9kText size="md">Medium body text</I9kText>
<I9kText size="lg">Large body text</I9kText>

Watch out

• variant="lede" caps the measure at 62ch and adds bottom margin — meant for intro paragraphs under a heading, not short or already-constrained copy.

API

Props

Prop	Type	Default	Required
as	string | Component	'p'	no
size	'sm' | 'md' | 'lg'	'md'	no
variant	'body' | 'lede'	'body'	no

Slots

• default

Agent prompt

Paste this into an agent to have it use the component correctly. It is self-contained.

Use I9kText from @9klabs/design for paragraph-level copy.

import { I9kText } from '@9klabs/design';

Props:
- as?: string | Component (default 'p') — the rendered root tag or component.
- size?: 'sm' | 'md' | 'lg' (default 'md')
- variant?: 'body' | 'lede' (default 'body')

Emits: none.

Slots: default — the text content.

Behavior: 'lede' sets a wider line height, a quieter color, and caps the measure at 62ch, for the introductory paragraph under a heading. 'body' is normal flowing copy with no measure cap.

IMPORTANT: 'lede' adds bottom margin and a max-width of 62ch — do not use it for short inline copy or content already inside a constrained container, or the extra spacing will look wrong.

Usage:
<I9kText variant="lede" size="lg">A practical text primitive for branded content.</I9kText>