# Components
The blocks you can use in any page, with an example of each. They work in MDX without an import.
Pages live in `src/content/docs/` as MDX files. Write Markdown as usual and drop in any of the components below where you need more than text.
## Callout
Use a callout for something the reader should not miss. There are four types: `note`, `tip`, `warning` and `danger`.
Search keys are read only.
Send documents in batches of up to 1,000 per request.
Changing ranking rules rebuilds the index, which can take a few minutes.
Deleting an index removes every document in it.
```mdx
Send documents in batches of up to 1,000 per request.
```
## Cards
Cards point to other pages. Group them with `CardGroup` and choose two or three columns.
Your first search in five minutes.
Admin keys, search keys and scoped keys.
```mdx
Your first search in five minutes.
```
The icons are `rocket`, `key`, `database`, `code`, `book`, `flash`, `search`, `filter` and `layers`.
## Code groups
Show the same example in several languages. Readers switch with the tabs, and every block has a copy button.
```bash
curl https://api.zeroindex.test/v1/indexes/products \
-H "Authorization: Bearer $ZEROINDEX_KEY"
```
```js
const index = await client.index("products").get();
```
````mdx
```bash
curl https://api.zeroindex.test/v1/indexes/products
```
```js
const index = await client.index("products").get();
```
````
## Tabs
Tabs hold any content, not only code.
Use an admin key and the full client. It can add and delete documents.
Use a search key and the search only client. It is under 4 kB.
```mdx
Use an admin key and the full client.
Use a search key and the search only client.
```
## Steps
Steps number a sequence for you.
Name it after what it holds, like `products`.
Send them as a JSON array.
Query the index from your app.
```mdx
Name it after what it holds.
Send them as a JSON array.
```
## Accordion
Accordions hide detail until the reader asks for it. They suit questions and edge cases.
Any JSON object with an `id`. Nested objects and arrays are fine.
Each document can be up to 100 kB.
```mdx
Any JSON object with an `id`.
```
## Fields
Document the parameters a request takes with `ParamField`, and what comes back with `ResponseField`.
The text to search for.
How many hits to return, up to 100.
The matching documents, best first.
```mdx
How many hits to return, up to 100.
The matching documents, best first.
```
## Badges
Badges label versions and states: Beta New Preview Stable Deprecated v2.4
```mdx
Stable
```
The variants are `muted`, `accent`, `warning`, `success`, `danger` and `outline`.
## Images
Wrap screenshots in a `Frame` to give them a border and an optional caption. Pass `darkSrc` and readers in dark mode see the dark version. Put image files in `public/images/`.
```mdx
```
Plain Markdown images get the same border, without a frame or caption.
## Video
`Video` plays a file you host. Add `autoplay` for short clips that loop silently, like a terminal recording. Without it, the video waits behind a poster with controls.
```mdx
```
For YouTube or Vimeo, pass the video id instead of `src`. The player only loads when someone presses play, so the page stays fast.
```mdx
```