# Components

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

Every component you can use in a page - callouts, cards, tabs, steps, code groups and more - with no imports.

Components are tags you write in an `.mdx` page, like `<Callout>` or `<Card>`. All of them are available in every page and [snippet](https://preview.writedocs.io/docs/content/snippets/), with no `import`.

```mdx
<Callout type="tip" title="Before you start">
  You'll need an API key - create one in the dashboard.
</Callout>
```

> **Before you start**
>
> You'll need an API key - create one in the dashboard.

## Callouts and text

**[Callout](https://preview.writedocs.io/docs/content/components/callout/)**

A highlighted box for a note, tip, warning or danger.

**[Hint](https://preview.writedocs.io/docs/content/components/hint/)**

A word with a tooltip, in the middle of a sentence.

**[Badge](https://preview.writedocs.io/docs/content/components/badge/)**

A small label for a status, a version or a plan.

**[Icon](https://preview.writedocs.io/docs/content/components/icon/)**

An icon in the text - and the icons you can use everywhere.

## Layout

**[Card and CardGroup](https://preview.writedocs.io/docs/content/components/card/)**

Cards that link to pages, and a grid to lay them - or anything - out in columns.

**[Tile](https://preview.writedocs.io/docs/content/components/tile/)**

A preview image on a patterned background, with a title.

**[Panel](https://preview.writedocs.io/docs/content/components/panel/)**

Content pinned to the right-hand column.

## Organizing content

**[Tabs](https://preview.writedocs.io/docs/content/components/tabs/)**

The same place in a page, with a tab per option.

**[Accordion](https://preview.writedocs.io/docs/content/components/accordion/)**

Sections that open and close.

**[Steps](https://preview.writedocs.io/docs/content/components/steps/)**

A numbered procedure.

**[View](https://preview.writedocs.io/docs/content/components/view/)**

A whole page in versions - per language or framework - with one switcher.

**[Visibility](https://preview.writedocs.io/docs/content/components/visibility/)**

Content only for people, or only for AI tools.

## Code

**[CodeGroup](https://preview.writedocs.io/docs/content/components/code-group/)**

Several code blocks, one at a time, with tabs or a menu.

**[CodeBlock](https://preview.writedocs.io/docs/content/components/code-block/)**

A code block built from props.

**[RequestExample and ResponseExample](https://preview.writedocs.io/docs/content/components/request-response-example/)**

A request and its response, pinned beside the page.

## Media

**[Image](https://preview.writedocs.io/docs/content/components/image/)**

An image with a size, a caption and a dark-mode version.

**[Frame](https://preview.writedocs.io/docs/content/components/frame/)**

A border and a caption around anything.

**[Video](https://preview.writedocs.io/docs/content/components/video/)**

A video file, or a YouTube, Vimeo or Loom video.

## Reference

**[Parameter](https://preview.writedocs.io/docs/content/components/parameter/)**

A field's name, type and description - for APIs and configuration.

**[Searchbar](https://preview.writedocs.io/docs/content/components/searchbar/)**

A box that filters a table as the reader types.

**[Tree](https://preview.writedocs.io/docs/content/components/tree/)**

Files and folders.

**[Update](https://preview.writedocs.io/docs/content/components/update/)**

Changelog entries, with filters.

**[Color](https://preview.writedocs.io/docs/content/components/color/)**

Color swatches that copy their value.

**[Prompt](https://preview.writedocs.io/docs/content/components/prompt/)**

An AI prompt to copy, or open in Cursor.

**[GitHub repository](https://preview.writedocs.io/docs/content/components/github/)**

A card for a GitHub repository, with its stars.

## Writing components

- **Props** are written like HTML attributes: text in quotes (`title="Setup"`), anything else in braces (`cols={3}`, `defaultOpen={true}`, `tags={["Fix"]}`). A prop with no value is `true`: `<Accordion defaultOpen>`.
- **Content** goes between the opening and closing tags, and can be Markdown - lists, code blocks, other components. Leave a blank line after the opening tag when the content starts with a list or a code block.
- **Mistakes** - a tag that isn't closed, or a component that doesn't exist - are reported by [`writedocs validate`](https://preview.writedocs.io/docs/cli/#writedocs-validate) and `writedocs dev`, with the file and line. An unknown component shows just its content.

## Your own classes

Every component accepts `className`, added to its outer element:

```mdx
<Card title="Enterprise" className="featured-card" href="/enterprise/">
  SSO, audit logs and a dedicated contact.
</Card>
```

Style the class in a [CSS file](https://preview.writedocs.io/docs/configuration/custom-code/), or use [utility classes](https://preview.writedocs.io/docs/content/markdown/#styling-with-classes) directly: `className="mt-8"`.

## Your own components

For something no component covers, write a React component in a [snippet](https://preview.writedocs.io/docs/content/snippets/), and import it.