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.

Without JavaScript

No component loads a script. Whatever needs interaction therefore goes through native elements or through CSS: details for expanding, a link for moving, animation-timeline for appearing on scroll.

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.