Zentauri UI
Typography

Inline emphasis and tokens

Compose InlineCode for monospace tokens and Text toggles for semantic emphasis patterns inside paragraphs.

Run pnpm install then ship.

Variants showcase

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

Tone default with token

Tone muted with token

Tone primary with token

Tone secondary with token

Tone accent with token

Tone destructive with token

Tone info with token

Tone success with token

Tone warning with token

Tone error with token

Tone gradient-pink-violet with token

Tone gradient-cyan-violet with token

Tone gradient-cyan-blue with token

Tone gradient-cyan-green with token

Tone gradient-cyan-orange with token

Tone gradient-cyan-red with token

Tone gradient-cyan-purple with token

Tone gradient-cyan-pink with token

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.

Deploy via npx zentauri-ui add typography then verify destructive warnings when deleting routes.

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

Run pnpm lint before merge.

Variant: INLINE · TONE · MUTED

Run pnpm lint before merge.

Variant: INLINE · TONE · PRIMARY

Run pnpm lint before merge.

Variant: INLINE · TONE · SECONDARY

Run pnpm lint before merge.

Variant: INLINE · TONE · ACCENT

Run pnpm lint before merge.

Variant: INLINE · TONE · DESTRUCTIVE

Run pnpm lint before merge.

Variant: INLINE · TONE · INFO

Run pnpm lint before merge.

Variant: INLINE · TONE · SUCCESS

Run pnpm lint before merge.

Variant: INLINE · TONE · WARNING

Run pnpm lint before merge.

Variant: INLINE · TONE · ERROR

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-PINK-VIOLET

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-VIOLET

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-BLUE

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-GREEN

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-ORANGE

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-RED

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-PURPLE

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-PINK

Run pnpm lint before merge.

Variant: INLINE · NESTED EMPHASIS · BOLD SPAN

Deploy via npx zentauri-ui add typography then verify destructive warnings

What it does

Demonstrates emphasis combinations on Text and monospace InlineCode surfaces.

Tones align with the broader typography palette.

Composition and API

Nest InlineCode inside Text or headings sparingly.

Avoid deeply nested emphasis toggles.

Common use cases

  • CLI snippets beside sentences.
  • API parameter names in prose.
  • Warnings with destructive tone.
  • Highlighted beta labels.

Accessibility

Underline complements links elsewhere—avoid conflicting patterns.

Highlight should not be the only cue.

Next.js integration notes

Static docs can ship Inline-heavy paragraphs from MDX.

Ensure code tokens escape user-provided strings.

FAQ

Should InlineCode wrap keyboard keys?

Yes for monospace clarity; pair with Text emphasis when describing shortcuts.

Can InlineCode sit inside buttons?

Technically yes, but prefer plain spans inside buttons unless monospace is required.

Does destructive tone imply errors?

It applies rose text styling—reserve for risky actions or validation messaging.