Text

AtomThrive, no shadcn equivalent

Sets text in one of the design's type styles, on whichever element the content is.

components/atoms/text.tsx

Use it for: Every heading, paragraph and caption on a screen — the style from the design, the element from the page outline.
Not for: Text inside another atom; atoms use the type utilities (text-body-2…) directly.

States

Let’s make it official.

DisplayCooper

Your Workspace

HeadingGoogle Sans

Introduce yourself

This is how your name will show up in the system.

Subtitle and body

NewSent 2 minutes ago

Caption and overline

Default

Muted

Brand

Danger

Success

Info

Warning

Tones

See the type scale

Every styleSpecs on the tokens page

Usage

import { Text } from '@/components/atoms/text';

<Text variant="display-3" as="h1">Let’s make it official.</Text>
<Text variant="body-2" tone="muted">May I ask how you would like to be introduced?</Text>

// Looks like h6, is the page's second-level heading:
<Text variant="h6" as="h2">Your Workspace</Text>

Props

Text props
Prop	Type	Default	Description
variant	'display-1'…'display-6' \| 'h1'…'h6' \| 'subtitle-1'…'subtitle-4' \| 'subtitle-display-1'…'-4' \| 'subtitle-handwrite-1'…'-4' \| 'body-1'…'body-3' \| 'quote' \| 'code' \| 'label' \| 'caption' \| 'overline'	'body-1'	The blueprint type role. Display, subtitle-display and quote are set in Cooper, subtitle-handwrite in Caveat, code in mono, the rest in Google Sans.
as	'h1'…'h6' \| 'p' \| 'span' \| 'div' \| 'strong' \| 'small' \| 'label' \| 'legend' \| 'figcaption'	by variant	The element. Heading styles default to their own level, everything else to p or span.
tone	'default' \| 'muted' \| 'brand' \| 'danger' \| 'success' \| 'info' \| 'warning'	'default'	Text colour, from the foreground roles; the last four from the status roles.
...rest	ComponentProps<as>	—	The element’s own props — htmlFor on a label, id, aria-*, ref.

Accessibility

Choose `as` from the page outline, not the look: one h1 per page, no skipped levels.
A heading style on a p is not a heading to a screen reader — use as="h2" when it is one.