alder-ui demos

al-page

The content frame: a centred column of a set maximum width. Put one directly in <body>; this demo nests them to compare the widths.

Widths

narrow: at most 40rem

normal (the default): at most 56rem

wide: at most 80rem

Typography

Flow content in a page gets shadcn's typography: headings, paragraphs, links, code, quotes, lists, rules and tables.

A quoted passage.
  • First item
  • Second item

NameValue
AlphaOne
BetaTwo

The details:

Title
Hello world
Author
Ada Lovelace
Published
25 October 2026

Plain

plain switches the typography off for a page that brings its own; only the reset stays.

Title
Hello world