Data

Typography

Text primitives: semantic Heading (h1-h6) with a decoupled size scale, inline Text, block Paragraph and mono Code — also bundled as the Typography namespace.

Import

import { Heading, Text, Paragraph, Code, Typography } from "@zephora/react";

Examples

Headings

Semantic `level` and visual `size` are independent.

Heading 1

Heading 2

Heading 3

h2 rendered at md size

<Heading level={1}>Heading 1</Heading>
<Heading level={2}>Heading 2</Heading>
<Heading level={3}>Heading 3</Heading>
<Heading level={2} size="md" weight="bold">
  h2 rendered at md size
</Heading>

Text variants

Large semiboldMuted secondary text

This long line is truncated with a single-line ellipsis when it overflows.

<Text size="lg" weight="semibold">Large semibold</Text>
<Text muted>Muted secondary text</Text>
<Text as="p" truncate style={{ maxWidth: 220 }}>
  This long line is truncated with a single-line ellipsis when it overflows.
</Text>

Paragraph and code

Install the package with npm install @zephora/react and import any component from the root entry point.

<Paragraph leading="relaxed">
  Install the package with <Code>npm install @zephora/react</Code> and import any
  component from the root entry point.
</Paragraph>

API

Heading props

Prop	Type	Default	Description
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Semantic heading level — renders `<h1>`…`<h6>`.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl"`	—	Visual size override; defaults to a scale matching the level.
`weight`	`"regular" \| "medium" \| "semibold" \| "bold"`	`"semibold"`	Font weight.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

Text props

Prop	Type	Default	Description
`as`	`"span" \| "div" \| "p" \| "strong" \| "em"`	`"span"`	Rendered element.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Font size scale.
`weight`	`"regular" \| "medium" \| "semibold" \| "bold"`	—	Font weight.
`muted`	`boolean`	`false`	Uses the muted foreground color.
`truncate`	`boolean`	`false`	Single-line ellipsis truncation.
`align`	`"start" \| "center" \| "end" \| "justify"`	—	Text alignment.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

Paragraph props

Prop	Type	Default	Description
`leading`	`"tight" \| "normal" \| "relaxed"`	`"normal"`	Line-height scale.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Font size scale.
`muted`	`boolean`	`false`	Uses the muted foreground color.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.