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>;
}

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

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.