Typography

Lists for steps and bullets

Switch between ordered and unordered markers, nest lists inside items, and align tone with surrounding copy.

Unordered item one
Nested steps
1. Step one
2. Step two

Variants showcase

Tone tokens align with dark shells across Zentauri previews—swap surfaces thoughtfully.

default

Alpha
Beta

muted

Alpha
Beta

primary

Alpha
Beta

secondary

Alpha
Beta

accent

Alpha
Beta

destructive

Alpha
Beta

info

Alpha
Beta

success

Alpha
Beta

warning

Alpha
Beta

error

Alpha
Beta

gradient-pink-violet

Alpha
Beta

gradient-cyan-violet

Alpha
Beta

gradient-cyan-blue

Alpha
Beta

gradient-cyan-green

Alpha
Beta

gradient-cyan-orange

Alpha
Beta

gradient-cyan-red

Alpha
Beta

gradient-cyan-purple

Alpha
Beta

gradient-cyan-pink

Alpha
Beta

Formatting showcase

Boolean emphasis props layer Tailwind utilities consistently.

Unordered markers

Disc (default)

Circle marker

None marker

Ordered

First
Second

Combination examples

Patterns you can paste into marketing pages and dashboards.

Ship typography primitives
Layer previews
- Animate sparingly
- Measure contrast

Typography variants examples

Density mirrors other previews: each row pairs live output with the matching import and JSX. Use Show output / Show code on every row; snippets start with Variant naming the token row.

Variant: LIST · UNORDERED · TONE · DEFAULT

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · MUTED

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · PRIMARY

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · SECONDARY

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · ACCENT

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · DESTRUCTIVE

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · INFO

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · SUCCESS

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · WARNING

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · ERROR

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · GRADIENT-PINK-VIOLET

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · GRADIENT-CYAN-VIOLET

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · GRADIENT-CYAN-BLUE

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · GRADIENT-CYAN-GREEN

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · GRADIENT-CYAN-ORANGE

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · GRADIENT-CYAN-RED

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · GRADIENT-CYAN-PURPLE

First bullet
Second bullet

Variant: LIST · UNORDERED · TONE · GRADIENT-CYAN-PINK

First bullet
Second bullet

Variant: LIST · ORDERED · DECIMAL

Download kit
Wire tokens

Variant: LIST · MARKER · DISC

Marker sample

Variant: LIST · MARKER · CIRCLE

Marker sample

Variant: LIST · MARKER · NONE

Marker sample

Typography API

Generated from the package prop types and variant definitions.

Blockquote

BlockquoteProps

Behavior

Prop	Type	Default
attributionAttribution label shown in a footer (distinct from the HTML `cite` URL attribute).	`string \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`(Ref<HTMLQuoteElement> & RefObject<HTMLQuoteElement>) \| undefined`	none
tone	`TypographyTone \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLQuoteElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CodeBlock

CodeBlockProps

Behavior

Prop	Type	Default
languageHint for stacked highlighting stacks / aria-labels.	`string \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`(Ref<HTMLPreElement> & RefObject<HTMLPreElement>) \| undefined`	none
tone	`TypographyTone \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLPreElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Heading

HeadingProps

Variants

Prop	Type	Default
level*	`123456`	none

Behavior

Prop	Type	Default
bold	`boolean \| undefined`	none
displayLevelVisual scale; defaults to `level`.	`HeadingLevel \| undefined`	none
italic	`boolean \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`(Ref<HTMLHeadingElement> & RefObject<HTMLHeadingElement>) \| undefined`	none
strikethrough	`boolean \| undefined`	none
tone	`TypographyTone \| undefined`	none
underline	`boolean \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLHeadingElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

InlineCode

InlineCodeProps

Behavior

Prop	Type	Default
tone	`TypographyTone \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

List

ListProps

Behavior

Prop	Type	Default
marker	`UnorderedMarker \| undefined`	none
ordered	`boolean \| undefined`	none
tone	`TypographyTone \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLOListElement> \| MouseEventHandler<HTMLUListElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

ListItem

ListItemProps

Behavior

Prop	Type	Default
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`(Ref<HTMLLIElement> & RefObject<HTMLLIElement>) \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLLIElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Text

TextProps

Variants

Prop	Type	Default
size	`baselgsm`	base

Behavior

Prop	Type	Default
as	`TextElement \| undefined`	none
bold	`boolean \| undefined`	none
highlight	`boolean \| undefined`	none
italic	`boolean \| undefined`	none
strikethrough	`boolean \| undefined`	none
tone	`TypographyTone \| undefined`	none
underline	`boolean \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

What it does

Exposes ul and ol variants with shared tone styling.

List.Item renders relaxed line-height items ready for nested lists.

Composition and API

Use ordered for sequences and unordered for collections.

Apply marker styles only when ordered is false.

Common use cases

Installation steps with decimals.
Feature bullets with discs.
Nested procedures inside cards.
Settings pages enumerating options.

Accessibility

Announce lists with proper ul/ol semantics.

Ensure nested lists maintain coherent reading order.

Next.js integration notes

Static lists render from server components.

Hydrate only when adding interactive reordering.

FAQ

How do I nest lists?

Place another List inside a List.Item child; keep nesting shallow for readability.

Can markers be removed?

Use marker="none" on unordered lists when building custom layouts while keeping semantic ul structure.

Are ordered lists always decimal?

Ordered lists apply decimal styling by default; extend via className if you need alternate schemes.