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

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.