` instead of a link - still useful purely for the icon+title+description layout.
```mdx
Get an API key and make your first request.
How API keys, scopes, and token expiry work.
```
Set `img` instead of `icon` for a full-width image above the title:
`img` takes priority over `icon` if both are set - useful for a screenshot or illustration instead of a small glyph.
```mdx
Renders full-width above the title.
```
Set `method` for an API-reference style card - a solid, colored badge next to the title (`GET`/`POST`/`PUT`/`PATCH`/`DELETE`, any other value renders gray), same color set as the sidebar's own OpenAPI method badges:
List every widget in the store.
Register a new widget.
```mdx
List every widget in the store.
```
## Tabs and Tab
Switches between mutually-exclusive content - one visible block at a time, useful for the same instruction shown across multiple package managers, languages, or platforms:
```bash
npm install @acme/core-sdk
```
```bash
pnpm add @acme/core-sdk
```
```bash
yarn add @acme/core-sdk
```
````mdx
```bash
npm install @acme/core-sdk
```
```bash
pnpm add @acme/core-sdk
```
````
`Tabs` itself takes no props; `Tab`'s only prop is `title` (required) - the label on its clickable pill.
## CodeGroup
Groups two or more fenced code blocks into a tabbed interface, switching between them the same way `Tabs` does - one visible at a time. Each fenced block's own `title="..."` meta becomes its tab label; with no title, the block's language is used instead:
```js title="index.js"
import { Core } from "@acme/core-sdk";
const client = new Core({ apiKey: process.env.ACME_API_KEY });
```
```bash title="cURL"
curl https://api.kitchen-sink.example.com/v1/widgets \
-H "X-API-Key: $ACME_API_KEY"
```
```python title="index.py"
import acme
client = acme.Core(api_key="...")
```
````mdx
```js title="index.js"
import { Core } from "@acme/core-sdk";
```
```bash title="cURL"
curl https://api.kitchen-sink.example.com/v1/widgets
```
````
A single-block `CodeGroup` renders as one plain bordered block with no tab strip:
```bash
npm install @acme/core-sdk
```
## Accordion and AccordionGroup
Good for FAQs or optional detail that shouldn't take up space by default:
No - every endpoint and response shape in this fixture is illustrative, meant only to exercise writedocs' own components.
Yes - see [Quickstart](/docs/core/2026-01/guides/quickstart/), where `Tabs`/`Tab` and `CodeGroup` both live inside a `Steps`/`Step` sequence.
Yes - a reusable `.mdx` snippet gets the same automatic component injection as an ordinary page. See the pro-tip callout at the bottom of [Introduction](/docs/core/2026-01/guides/introduction/) for a live example.
```mdx
No - every endpoint and response shape in this fixture is illustrative.
```
`title` is required - and, like `Callout`/`Card`/etc., becomes a linkable `#slug` anchor automatically, deduped against every other titled element on the page. `icon` is optional (resolved the same way as `Card`'s own `icon` prop); omit it and the row lays out exactly as before. `AccordionGroup` takes no props - it's a spacing wrapper that also unites its children under one shared border (see above).
## Steps and Step
Numbered, connected steps for sequential instructions:
Create or edit an `.mdx` file under `docs/` - or, as this fixture shows, anywhere else in the project.
Run `writedocs dev` and check the change in your browser - edits to content or `docs.json` apply without a server restart.
Run `writedocs build` and deploy the resulting `dist/` folder to any static host.
An untitled step renders its content with no bold heading line above it:
`title` is optional on `Step` - this one has none.
Mixing titled and untitled steps in the same `Steps` sequence is fine.
```mdx
Create or edit an `.mdx` file under `docs/`.
Run `writedocs dev` and check the change in your browser.
```
`Steps` itself takes no props; `Step`'s `title` prop is optional.
## Hint
An inline, dotted-underline span for a short aside — hover or focus to reveal a one-line tooltip, without breaking up a sentence into its own block the way `Callout` does:
Widget IDs are globally unique across every store.
```mdx
Widget IDs are globally unique across every store.
```
`tip` (required) is the tooltip's plain-text content. Unlike every other component on this page, `Hint` is inline - meant to sit mid-sentence, not on its own line.
## Image
Centers an image, rounds its corners, and constrains its width to `size` at full screen - still shrinking normally on a narrower viewport. Set `srcDark` alongside `src` to swap in a different image for dark mode:
![]()
`, a markdown `![]()` image, a `