# Components

> The components available in every page, without an import.

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`.

<ForTheme framework="tailwind">

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

```mdx
<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.

</ForTheme>
<ForTheme framework="custom">

With the custom theme, a `className` names classes of your own: there are no
utilities. Every `.css` file of the `theme/` folder, at the root of the
project, is appended to the stylesheet, and `docpensieve dev` picks up every
change.

```mdx
<Card className="narrow">
  <CardHeader className="centered">Title</CardHeader>
</Card>
```

```css
/* theme/custom.css */
.narrow {
  max-inline-size: 24rem;
}

.centered {
  text-align: center;
}
```

The component classes live in the `components` layer, those of the theme
folder in none: a class of yours always wins.

The examples of these pages use the classes of `theme/99-docpensieve.css`,
which `init` wrote next to this documentation: delete both together.

</ForTheme>

Every example is shown in the terms of the site's theme, through
[ForTheme](/versions/v0.2/components/for-theme/): changing `theme.framework` in the configuration
changes the examples too.

## Available

- [Card](/versions/v0.2/components/card/) — card, with header, body, footer and image
- [Columns](/versions/v0.2/components/columns/) — column grid
- [TimeTimer](/versions/v0.2/components/time-timer/) — display depending on a date
- [Tooltip](/versions/v0.2/components/tooltip/) — tooltip on hover and from the keyboard
- [Tree](/versions/v0.2/components/tree/) — collapsible tree
- [ScrollToTop](/versions/v0.2/components/scroll-to-top/) — back to the top of the page
- [Skill](/versions/v0.2/components/skill/) — level gauge
- [LogoIcon](/versions/v0.2/components/logo-icon/) — SVG icon inlined in the page
- [ForTheme](/versions/v0.2/components/for-theme/) — 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.