Zentauri UI
Typography

Multi-line code samples

Use CodeBlock for copy-ready snippets with horizontal scrolling on narrow viewports and aria-labels describing language hints.

pnpm add @zentauri-ui/zentauri-components

Variants showcase

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

default

export const tone = "default";

muted

export const tone = "muted";

primary

export const tone = "primary";

secondary

export const tone = "secondary";

accent

export const tone = "accent";

destructive

export const tone = "destructive";

info

export const tone = "info";

success

export const tone = "success";

warning

export const tone = "warning";

error

export const tone = "error";

gradient-pink-violet

export const tone = "gradient-pink-violet";

gradient-cyan-violet

export const tone = "gradient-cyan-violet";

gradient-cyan-blue

export const tone = "gradient-cyan-blue";

gradient-cyan-green

export const tone = "gradient-cyan-green";

gradient-cyan-orange

export const tone = "gradient-cyan-orange";

gradient-cyan-red

export const tone = "gradient-cyan-red";

gradient-cyan-purple

export const tone = "gradient-cyan-purple";

gradient-cyan-pink

export const tone = "gradient-cyan-pink";

Formatting showcase

Boolean emphasis props layer Tailwind utilities consistently.

{
  "name": "zentauri-ui",
  "private": true
}

Combination examples

Patterns you can paste into marketing pages and dashboards.

import { Text } from "@zentauri-ui/zentauri-components/ui/typography";

export function Demo() {
  return <Text tone="muted">Preview-ready body copy.</Text>;
}

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

export const tone = "default";

Variant: CODE-BLOCK · TONE · MUTED

export const tone = "muted";

Variant: CODE-BLOCK · TONE · PRIMARY

export const tone = "primary";

Variant: CODE-BLOCK · TONE · SECONDARY

export const tone = "secondary";

Variant: CODE-BLOCK · TONE · ACCENT

export const tone = "accent";

Variant: CODE-BLOCK · TONE · DESTRUCTIVE

export const tone = "destructive";

Variant: CODE-BLOCK · TONE · INFO

export const tone = "info";

Variant: CODE-BLOCK · TONE · SUCCESS

export const tone = "success";

Variant: CODE-BLOCK · TONE · WARNING

export const tone = "warning";

Variant: CODE-BLOCK · TONE · ERROR

export const tone = "error";

Variant: CODE-BLOCK · TONE · GRADIENT-PINK-VIOLET

export const tone = "gradient-pink-violet";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-VIOLET

export const tone = "gradient-cyan-violet";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-BLUE

export const tone = "gradient-cyan-blue";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-GREEN

export const tone = "gradient-cyan-green";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-ORANGE

export const tone = "gradient-cyan-orange";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-RED

export const tone = "gradient-cyan-red";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-PURPLE

export const tone = "gradient-cyan-purple";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-PINK

export const tone = "gradient-cyan-pink";

Variant: CODE-BLOCK · LANGUAGE · BASH

pnpm add @zentauri-ui/zentauri-components

Variant: CODE-BLOCK · LANGUAGE · TSX

import { Text } from "@zentauri-ui/zentauri-components/ui/typography";

export function Demo() {
  return <Text tone="muted">Ready.</Text>;
}

What it does

Wraps children in pre/code with padded, bordered surfaces.

Overflow-x keeps wide snippets usable on mobile.

Composition and API

Tone adjusts text color consistently with other typography primitives.

Extend via className when embedding inside cards.

Common use cases

  • Installation commands.
  • JSON payloads in docs.
  • Diff excerpts for reviews.
  • Sample env blocks with warnings.

Accessibility

Labels describe the snippet purpose.

Ensure focus order still reaches surrounding explanatory text.

Next.js integration notes

Avoid importing massive highlighters into server layouts unnecessarily.

Lazy-load heavy highlighting clientside when needed.

FAQ

Does CodeBlock highlight syntax?

Not by default—pipe highlighted nodes as children or integrate a highlighter in your app shell.

How does language prop help?

It shapes aria-label text for assistive technologies and future highlighting integrations.

Can children include JSX?

Pass plain text children for simplest cases; advanced highlighting may inject spans inside code.