Layout component

Typography

Theme-aware, responsive typography component.

6 props1 slots0 eventsTheme readyResponsive

Interactive playground

Configure Typography

Change any prop and inspect the server-rendered component immediately.

Live preview

Composable content area.

Component code

<Typography>
  <!-- Add default slot content here -->
</Typography>

Live examples

Compare configurations and resize the browser to check responsive behavior.

Recommended

Balanced spacing, hierarchy, and content for the most common product workflow.

Live preview

Composable content area.

Component usage.wrn

<Typography>
  <!-- Add default slot content here -->
</Typography>

Dense UI

A tighter variation for dashboards, side panels, tables, and operational interfaces.

Live preview

Composable content area.

Component usage.wrn

<Typography
  size="sm">
  <!-- Add default slot content here -->
</Typography>

Extended

A more expressive variation using additional data, stronger emphasis, and optional states.

Live preview

Rich supporting content with additional context.

Component usage.wrn

<Typography
  size="lg">
  <!-- Add default slot content here -->
</Typography>

Component API

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`columns`	number	`2`	No
`gap`	string	`"md"`	No
`maxWidth`	string	`"xl"`	No
`class`	string	`""`	No