Text
Render typography with various variants, colors, and styling options for displaying content.
Source
LLM docs
Package
Examples
10
Properties
59
Playground
Basics
Various different variants and semantic elements.
Loading demo…
import { Block, Text } from '@plocks/ui';
export function Demo() {
return (
<Block>
<Text variant="h1">Heading 1</Text>
<Text variant="h2">Heading 2</Text>
<Text variant="h3">Heading 3</Text>
<Text variant="h4">Heading 4</Text>
<Text variant="h5">Heading 5</Text>
<Text variant="h6">Heading 6</Text>
<Text>The quick brown fox jumps over the lazy dog.</Text>
<Text variant="small">The quick brown fox jumps over the lazy dog.</Text>
</Block>
);
}Colors
Set
c to a theme text role (primary, secondary, muted, disabled, link), a palette color or shade (success, error.7), or any CSS color.Loading demo…
import { Block, Text } from '@plocks/ui';
export function Demo() {
return (
<Block gap="lg">
<Block>
<Text c="primary">primary</Text>
<Text c="secondary">secondary</Text>
<Text c="muted">muted</Text>
<Text c="disabled">disabled</Text>
<Text c="link">link</Text>
</Block>
<Block>
<Text c="success">success</Text>
<Text c="error">error</Text>
<Text c="primary.5">primary.5</Text>
<Text c="error.7">error.7</Text>
</Block>
<Block>
<Text c="#ff6b6b">#ff6b6b</Text>
<Text c="#4ecdc4">#4ecdc4</Text>
<Text c="#45b7d1">#45b7d1</Text>
<Text c="#96ceb4">#96ceb4</Text>
<Text c="#feca57">#feca57</Text>
</Block>
</Block>
);
}Variants
Compare heading, paragraph, quotation, code, and small text variants.
Loading demo…
import { Column, Text } from '@plocks/ui';
export function Demo() {
return (
<Column gap="md">
<Text variant="h2">Section heading</Text>
<Text variant="p">A paragraph uses the body text role.</Text>
<Text variant="blockquote">A quotation gets its own semantic element.</Text>
<Text variant="code">const label = 'inline code';</Text>
<Text variant="small">Supporting text uses the small role.</Text>
</Column>
);
}Weights
Set the font weight with
fw: a named weight (light → black) or a numeric one (100 → 900).Loading demo…
import { Block, Text } from '@plocks/ui';
export function Demo() {
return (
<Block gap="lg">
<Block>
<Text fw="light">light</Text>
<Text fw="normal">normal</Text>
<Text fw="medium">medium</Text>
<Text fw="semibold">semibold</Text>
<Text fw="bold">bold</Text>
<Text fw="black">black</Text>
</Block>
<Block>
<Text fw="100">100</Text>
<Text fw="300">300</Text>
<Text fw="400">400</Text>
<Text fw="600">600</Text>
<Text fw="700">700</Text>
<Text fw="900">900</Text>
</Block>
</Block>
);
}Font family
ff sets the font family. Title, Highlight, the H1–H6 / Code / Kbd / Bold / Italic aliases, GradientText, ShimmerText, and every <Text> slot prop (labelProps, descriptionProps, …) take it too.Loading demo…
import { Block, H3, Text } from '@plocks/ui';
export function Demo() {
return (
<Block>
<Text ff="monospace">monospace</Text>
<Text ff="Courier New">Courier New</Text>
<H3 ff="Georgia, serif">Heading in Georgia</H3>
</Block>
);
}Sizes
Different text sizes from small to large.
Loading demo…
import { Block, Row, Text } from '@plocks/ui';
const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
export function Demo() {
return (
<Row align="center" gap="lg" wrap="wrap">
{SIZES.map((size) => (
<Block key={size} align="center">
<Text size={size}>Aa</Text>
<Text variant="small">{size}</Text>
</Block>
))}
</Row>
);
}Heights
Set line height with
lh.Usage
lh accepts:- Multipliers (e.g.,
1.5) - multiplied by the font size - Absolute values (e.g.,
24) - treated as pixel values when > 3
<Text lh={1.2}>Tight line height</Text>
<Text lh={1.5}>Normal line height</Text>
<Text lh={24}>Absolute line height (24px)</Text>This provides precise control over text spacing and readability.
Loading demo…
import { Block, Text } from '@plocks/ui';
const LINE_HEIGHTS = [1.2, 1.5, 1.8, 2, 24];
const SAMPLE_TEXT =
'The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. Sphinx of black quartz, judge my vow. How vexingly quick daft zebras jump.';
export function Demo() {
return (
<Block fullWidth gap="lg">
{LINE_HEIGHTS.map((lineHeight) => (
<Block key={lineHeight}>
<Text variant="small" c="secondary">{lineHeight}</Text>
<Text lh={lineHeight}>{SAMPLE_TEXT}</Text>
</Block>
))}
</Block>
);
}Tracking
Set letter spacing in pixels with
lts. Negative values tighten spacing and positive values loosen it.Loading demo…
import { Block, Text } from '@plocks/ui';
const TRACKING = [-1, -0.5, 0, 0.5, 1, 2, 4];
export function Demo() {
return (
<Block>
{TRACKING.map((tracking) => (
<Text key={tracking} lts={tracking}>
Tracking {tracking}
</Text>
))}
</Block>
);
}Text transform
Set
tt to uppercase, lowercase, or capitalize to change the case of text without changing the string. none turns off the case a text role applies.Loading demo…
import { Block, Text } from '@plocks/ui';
export function Demo() {
return (
<Block>
<Text tt="uppercase">uppercase</Text>
<Text tt="lowercase">LOWERCASE</Text>
<Text tt="capitalize">capitalize each word</Text>
</Block>
);
}Style and decoration
fs sets the font style (italic, normal) and td the decoration (underline, line-through, none). Both override the aliases that set them, so <Italic fs="normal"> renders upright.Loading demo…
import { Block, Italic, Text } from '@plocks/ui';
export function Demo() {
return (
<Block>
<Text fs="italic">italic</Text>
<Text td="underline">underline</Text>
<Text td="line-through">line-through</Text>
<Italic fs="normal">Italic, set upright</Italic>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources