mdxui.dev
StartShowcaseSectionsThemesComponentsAppsAgentsReference
npm7.0.0-alpha.0
StartShowcaseSectionsThemesComponentsAppsAgentsReference
GalleryChoosing a Section type

How sections work

Anatomy of a pageSection shellsComposition and dividersBounds and countsInline grammar

Navigation

navfooter

Heroes

herostatementpage-head

Proof

statsfacts

Features

feature-gridfeature-splitbentocomparestepstext-stack

Code and prompts

terminalcommand-rowapi-callendpointsagent-prompt

Offer

pricingplan-table

Questions and calls

faqclosingcta-form

Reading

articlepost-list

Directory

product-headproduct-list
Sections
Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0

Gallery

Every Section type a living page holds, each rendered alone as one section of that page.

Each live render is one section of a living page, rendered alone by the published @mdxui/site. A living page is a Page record in this site's pages/, rendered on every build: the landing, and the 10 records of the Harbor tides Site.

27 of 27 Section types have a live render, from 11 living pages in pages/.

Live renders

27 of 27

Navigation

nav

The bar at the top of a page: brand, links, one call to action and a menu that needs no script.

quaypoint · 2 previews

footer

The foot of a page: brand and blurb, link columns and a ruled note row.

certificate · 2 previews

Heroes

hero

The opening of a page: headline, lede, actions, fine print and an optional preview window.

quaypoint · 2 previews

statement

One claim on its own, set large, with one phrase in the accent.

certificate · 1 preview

page-head

A plain page heading: a title and one line, with no actions.

quaypoint · 1 preview

Proof

stats

A band of three or four big numbers with captions, ruled between cells.

certificate · 2 previews

facts

Labels and values a buyer decides on, as one ruled list.

quaypoint · 1 preview

Features

feature-grid

A section head over a hairline grid of two, three, four, six or eight cells.

quaypoint · 2 previews

feature-split

Copy with exactly three features beside one preview window.

quaypoint · 1 preview

bento

Two to four panels, each a claim with its own preview, laid out from their count.

quaypoint · 2 previews

compare

Two columns side by side: what the old way costs and what this one gives.

quaypoint · 1 preview

steps

Copy beside a numbered list of three to five steps.

quaypoint · 2 previews

text-stack

Copy beside a column of ruled, titled paragraphs.

quaypoint · 2 previews

Code and prompts

terminal

The code window: dark in every Theme and scheme, plain or tabbed.

certificate · 2 previews

command-row

One command to copy, with a note beneath it.

quaypoint · 1 preview

api-call

One API call beside its answer, a JSON response or an event stream.

quaypoint · 1 preview

endpoints

An API at a glance: one ruled row per route, with its method, path and job.

quaypoint · 1 preview

agent-prompt

The prompt a reader pastes into a coding agent, copied in one action.

quaypoint · 1 preview

Offer

pricing

One to four plans under a section head, one of them featured.

quaypoint · 2 previews

plan-table

Plans as one ruled comparison table: a row per plan, a column per fact.

quaypoint · 1 preview

Questions and calls

faq

A heading beside questions that open in place, every one closed at first.

quaypoint · 2 previews

closing

The final call of a page: a head, then buttons or one command, never both.

quaypoint · 2 previews

cta-form

Copy beside a short form: a plain post, answered with no script.

quaypoint · 1 preview

Reading

article

A reading page: an optional head and share bar, then the body as prose.

quaypoint · 1 preview

post-list

A blog index: a head, then the posts as ruled rows.

quaypoint · 1 preview

Directory

product-head

A listing page header in a directory: mark, name, one sentence, category and tags.

quaypoint · 1 preview

product-list

A directory list: one linked row per listing, as a list or as Tiles.

quaypoint · 2 previews

Each living page is also rendered whole under every bundled Theme: see the Theme gallery.

Next Choosing a Section type
Maintainersllms.txtcatalog.jsonmanifest.jsonAlpha · closed source