Zentauri UI
Typography

Paragraph text for interfaces

Default to paragraph semantics with optional span, div, or label rendering when forms require it.

Large relaxed paragraph for intros.

Muted supporting sentence underneath.

Variants showcase

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

Paragraph tone — default

Paragraph tone — muted

Paragraph tone — primary

Paragraph tone — secondary

Paragraph tone — accent

Paragraph tone — destructive

Paragraph tone — info

Paragraph tone — success

Paragraph tone — warning

Paragraph tone — error

Paragraph tone — gradient-pink-violet

Paragraph tone — gradient-cyan-violet

Paragraph tone — gradient-cyan-blue

Paragraph tone — gradient-cyan-green

Paragraph tone — gradient-cyan-orange

Paragraph tone — gradient-cyan-red

Paragraph tone — gradient-cyan-purple

Paragraph tone — gradient-cyan-pink

Formatting showcase

Boolean emphasis props layer Tailwind utilities consistently.

Bold + italic + underline

Highlight + muted + strike

Combination examples

Patterns you can paste into marketing pages and dashboards.

Supporting paragraph with muted italic emphasis at larger size.

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: TEXT · TONE · DEFAULT

Body copy for dense interfaces.

Variant: TEXT · TONE · MUTED

Body copy for dense interfaces.

Variant: TEXT · TONE · PRIMARY

Body copy for dense interfaces.

Variant: TEXT · TONE · SECONDARY

Body copy for dense interfaces.

Variant: TEXT · TONE · ACCENT

Body copy for dense interfaces.

Variant: TEXT · TONE · DESTRUCTIVE

Body copy for dense interfaces.

Variant: TEXT · TONE · INFO

Body copy for dense interfaces.

Variant: TEXT · TONE · SUCCESS

Body copy for dense interfaces.

Variant: TEXT · TONE · WARNING

Body copy for dense interfaces.

Variant: TEXT · TONE · ERROR

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-PINK-VIOLET

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-VIOLET

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-BLUE

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-GREEN

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-ORANGE

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-RED

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-PURPLE

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-PINK

Body copy for dense interfaces.

Variant: TEXT · SIZE · SM

Sized paragraph text.

Variant: TEXT · SIZE · BASE

Sized paragraph text.

Variant: TEXT · SIZE · LG

Sized paragraph text.

Variant: TEXT · EMPHASIS · ITALIC + HIGHLIGHT + MUTED

Beta feature — subject to change.

What it does

Provides sized body copy with tone variants and emphasis switches.

Highlight wraps phrases with a subtle background wash.

Composition and API

Use `as` to swap tags without losing typography recipes.

Pair muted tone with secondary layout chrome sparingly.

Common use cases

  • Long-form docs and marketing blurbs.
  • Muted helper lines under controls.
  • Inline labels next to toggles.
  • Highlighted phrases without leaving the Text primitive.

Accessibility

Prefer paragraphs for blocks of text.

Reserve label rendering for actual label semantics tied to controls.

Next.js integration notes

Server components can render static Text content.

Move interactive demos into client boundaries only when required.

FAQ

How do sizes map?

sm, base, and lg align with Tailwind text-sm through text-lg with relaxed leading.

Can I nest interactive elements?

Children can include links or buttons; keep interactive targets large enough for pointer and keyboard users.

Does highlight use a fixed color?

Highlight applies an amber translucent wash suitable for dark shells; override with className if your theme differs.