Components

These components can be used in any .mdx page without an import.

They provide the structure — wrappers, separators, spacing. The look is set with className.

With the Tailwind theme, a className holds utilities, compiled from the ones your pages use:

<Card className="max-w-sm">
  <CardHeader className="text-center font-bold">Title</CardHeader>
</Card>

The component classes live in the components layer, below the utilities: a className set at use always wins.

Every example is shown in the terms of the site's theme, through ForTheme: changing theme.framework in the configuration changes the examples too.

Available

Card

Structured card, with header, body, footer and image.

Columns

Column grid, equal or in twelfths.

TimeTimer

Show content during a period, with fallbacks before and after.

Tooltip

Tooltip on hover and from the keyboard, without JavaScript.

Tree

Collapsible tree, built on native elements.

ScrollToTop

Back to the top of the page, set by the shell or by hand.

Skill

Level gauge, filled in CSS.

LogoIcon

SVG icon inlined in the page at build time.

ForTheme

Content kept for one theme only.

Cards

Grids of clickable cards, built from the pages of the version.

A menu of links placed anywhere in a page, folded behind a button on a narrow screen.

Admonition

A block set apart from the text, which says how to read it — and the kinds a project adds.

Snippet

A code block that names a real file of your project, read when the page is generated, so that the example cannot go stale.

Hero

The banner at the head of a page — a name, a sentence, and the way in.

Calendar

A month of dates and what happens on them — built at generation, navigable once the page has loaded its script.

Without JavaScript

No component loads a script but one: Calendar, whose arrows between months come from the client file of the version — and only on the pages that hold a calendar. Whatever else needs interaction goes through native elements or through CSS: details for expanding, a link for moving, animation-timeline for appearing on scroll.

The site itself can add a behaviour to a page — copyCode puts a copy button on each block of code — but that is a field you turn on, it lands in one file shared by the version, and only pages that use it load it.

When the browser does not know one of these properties yet, the component stays usable in its simplest state — visible, full, expanded. None of them waits for a capability to work.