# Components
> Built-in MDX components, available in every page without imports.
Source: https://aymericchaverot.github.io/zenith-docs/writing/components/
These components are available in all `.mdx` pages, without importing them. They render to static HTML, and only tabs ship a few lines of JavaScript. Plain `.md` pages cannot use components: rename the file to `.mdx` when a page needs one.
## Callout
The component form of [callouts](/writing/markdown/#callouts).
Callouts can contain **any** Markdown content.
```mdx
Callouts can contain **any** Markdown content.
```
## Cards
Get started in a few minutes.
Make it yours.
```mdx
Get started in a few minutes.
```
## Tabs
Tabs sharing a `groupId` switch together, and `persist` remembers the choice across pages. `items` sets the order of the tab list; without it, the list is built from the `value` of each ``. `defaultValue` picks the tab shown first.
```js
export const add = (a, b) => a + b;
```
```ts
export const add = (a: number, b: number) => a + b;
```
This tab switches along with the one above.
So does this one.
```mdx
…
…
```
Without JavaScript, all tabs are displayed one after the other.
## Steps
### Write
Add a Markdown file to the docs directory.
### Build
Run `zenith build`, or `astro build` in an Astro project.
You can also wrap a series of level 3 headings in `` without using ``, as on the [installation](/installation/) page.
## Accordion
Accordions use the native `` element. Accordions with the same `group` close each other, and `open` expands one when the page loads.
No. Pages are fully usable without it.
Yes, import any Astro component in an MDX page.
## Files
```mdx
```
## Icon
One of the [built-in icons](/reference/icons/), inline in the text: . Give it a `label` when the icon carries meaning on its own, so screen readers announce it.
```mdx
Press to search.
```
## APIPage
Renders operations of an OpenAPI document, see [OpenAPI](/openapi/).
```mdx
```