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 — card, with header, body, footer and image
• Columns — column grid
• TimeTimer — display depending on a date
• Tooltip — tooltip on hover and from the keyboard
• Tree — collapsible tree
• ScrollToTop — back to the top of the page
• Skill — level gauge
• LogoIcon — SVG icon inlined in the page
• ForTheme — content kept for one theme only

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.