Docs

Cinder UI

GitHub Hex
Original shadcn/ui docs ↗

Typography.typography

Server-rendered

Shadcn-inspired typography recipe for semantic headings and text treatments.

typography/1 is intentionally small: it applies token-based Tailwind classes to a single semantic element and does not style arbitrary prose descendants. Use as when the visual treatment should render as a different HTML tag.

Article heading stack

Realtime payments need boring interfaces

Operators need clear hierarchy, calm defaults, and text that survives dense workflows.

Use typography recipes when component copy needs consistent rhythm without introducing a rich text renderer or client-side dependency. 

  <div class="max-w-2xl">
  <.typography variant={:h1}>Realtime payments need boring interfaces</.typography>
  <.typography variant={:lead} class="mt-4">
    Operators need clear hierarchy, calm defaults, and text that survives dense workflows.
  </.typography>
  <.typography>
    Use typography recipes when component copy needs consistent rhythm without introducing
    a rich text renderer or client-side dependency.
  </.typography>
</div>

Inline UI copy

Workspace limits

API keys expire after 90d.

Last updated by the billing service. 

  <div class="max-w-md space-y-3">
  <.typography variant={:h3}>Workspace limits</.typography>
  <.typography variant={:muted}>
    API keys expire after <.typography variant={:inline_code}>90d</.typography>.
  </.typography>
  <.typography variant={:small} as="p">Last updated by the billing service.</.typography>
</div>

List recipe

  • Keep headings semantic.
  • Use tokens like text-muted-foreground.
  • Reach for component slots before custom wrappers.
  <.typography variant={:list}>
  <li>Keep headings semantic.</li>
  <li>Use tokens like <.typography variant={:inline_code}>text-muted-foreground</.typography>.</li>
  <li>Reach for component slots before custom wrappers.</li>
</.typography>

Attributes

Name Type Default Values Global Includes
as :string — nil , "h1" , "h2" , "h3" , "h4" , "p" , "div" , "small" , "blockquote" , "code" , "ul" , "h5" , "h6" , "ol" , "span" —
class :string — — —
rest :global — — —
variant :atom :p :h1 , :h2 , :h3 , :h4 , :p , :lead , :large , :small , :muted , :blockquote , :inline_code , :list —

Slots

Slot Slot Attributes
inner_block Required —