---
title: UI components | Stainless
description: Learn how to use UI components from Stainless and third-parties in your docs.
---

## Stainless components

We provide the following components in the Stainless Docs Platform:

- [Accordion](#accordion)
- [Badge](#badge)
- [Button](#button)
- [Callout](#callout)
- [Steps](#steps)

### Accordion

The `<Accordion>` component is an enhanced version of the HTML `<details>` element:

This is an example `<Accordion>` component

Additional details, visible when the `<Accordion>` is open.

Example code

```
import { Accordion } from '@stainless-api/docs/components';


<Accordion>
  <Accordion.Summary>
    This is an example `<Accordion>` component
  </Accordion.Summary>
  Additional details, visible when the `<Accordion>` is open.
</Accordion>
```

Any valid [`<details>` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details#attributes) can be used with an `<Accordion>` component.

#### Open by default

To make an `<Accordion>` open by default, add an `open` prop:

This `<Accordion>`’s details are visible by default

You can see this immediately!

Example code

```
import { Accordion } from '@stainless-api/docs/components';


<Accordion open>
  <Accordion.Summary>
    This `<Accordion>`'s details are visible by default
  </Accordion.Summary>
  You can see this immediately!
</Accordion>
```

#### Group `<Accordion>` components

Group `<Accordion>` components by nesting them inside an `<Accordion.Group>`:

Item one

Further information about item one.

Item two

Further information about item two.

Item three

Further information about item three.

Example code

```
import { Accordion } from '@stainless-api/docs/components';


<Accordion.Group>
  <Accordion>
    <Accordion.Summary>
      Item one
    </Accordion.Summary>
    Further information about item one.
  </Accordion>
  <Accordion>
    <Accordion.Summary>
      Item two
    </Accordion.Summary>
    Further information about item two.
  </Accordion>
  <Accordion>
    <Accordion.Summary>
      Item three
    </Accordion.Summary>
    Further information about item three.
  </Accordion>
</Accordion.Group>
```

### Badge

The `<Badge>` component is useful whenever you want to add a badge or indicator:

Beta Example of a badge that indicates a beta feature.

Example code

```
import { Badge } from '@stainless-api/docs/components';


<Badge intent="warning">Beta</Badge> Example of a beta badge.
```

#### Badge intents

Set the `intent` prop on a `<Badge>` to one of the values shown in the examples below to change its appearance.

The `accent` variant uses the [accent color](/docs/docs-platform/customization/styles-and-fonts/#accent-color/index.md) you’ve configured on your site. These docs use a black accent color, so the examples below don’t appear appreciably different from the `default` and `muted` variants.

none info success warning danger note tip accent

Example code

```
import { Badge } from '@stainless-api/docs/components';


<Badge intent="none">none</Badge> <Badge intent="info">info</Badge> <Badge intent="success">success</Badge> <Badge intent="warning">warning</Badge> <Badge intent="danger">danger</Badge> <Badge intent="note">note</Badge> <Badge intent="tip">tip</Badge> <Badge intent="accent">accent</Badge>
```

#### Badge sizes

Set the `size` prop on a `<Badge>` to `sm`, `md`, or `lg` to adjust the size (the default is `md`):

size=“sm” size=“md” size=“lg”

Example code

```
import { Badge } from '@stainless-api/docs/components';


<Badge intent="info" size="sm">size="sm"</Badge> <Badge intent="info" size="md">size="md"</Badge> <Badge intent="info" size="lg">size="lg"</Badge>
```

#### Badge icons

Use the `icon` prop via a [slot](https://docs.astro.build/en/guides/framework-components/#passing-children-to-framework-components) to add an icon to a `<Badge>`:

Ghosts!

Example code

```
import { Badge } from '@stainless-api/docs/components';
import { Ghost } from 'lucide-react';


<Badge intent="danger"><Ghost slot="icon"/>Ghosts!</Badge>
```

#### Make a badge solid

Set the `solid` prop to `true` to make a badge solid:

Solid! Regular

Example code

```
import { Badge } from '@stainless-api/docs/components';


<Badge intent="tip" solid="true">Solid!</Badge> <Badge intent="tip">Regular</Badge>
```

#### HTTP method badges

We provide an HTTP method badge variant, `<Badge.HTTP>`, that matches the badges in the API reference we generate for you. Set the `method` prop to the HTTP method of your choice to use this variant:

GET POST PUT PATCH DELETE

Example code

```
import { Badge } from '@stainless-api/docs/components';


<Badge.HTTP method="GET"/> <Badge.HTTP method="POST"/> <Badge.HTTP method="PUT"/> <Badge.HTTP method="PATCH"/> <Badge.HTTP method="DELETE"/>\
```

If you only want the HTTP method icon, add `iconOnly`:

Example code

```
import { Badge } from '@stainless-api/docs/components';


<Badge.HTTP method="GET" iconOnly/> <Badge.HTTP method="POST" iconOnly/> <Badge.HTTP method="PUT" iconOnly/> <Badge.HTTP method="PATCH" iconOnly/> <Badge.HTTP method="DELETE" iconOnly/>
```

### Button

Our `<Button>` component is useful for adding a call to action or other prominent link.

[Learn Stainless](https://stainless.com/docs)

Example code

```
import { Button } from '@stainless-api/docs/components';


<Button href="https://stainless.com/docs">Learn Stainless</Button>
```

#### Button variants

Set the `variant` prop on a `<Button>` to one of the values in the examples below for different appearances.

The `accent` and `accent-muted` variants use the [accent color](/docs/docs-platform/customization/styles-and-fonts/#accent-color/index.md) you’ve configured on your site. These docs use a black accent color, so the examples below don’t appear appreciably different from the `default` and `muted` variants.

outline ghost accent accent-muted muted success destructive default

Example code

```
import { Button } from '@stainless-api/docs/components';


<Button variant="outline">outline</Button> <Button variant="ghost">ghost</Button> <Button variant="accent">accent</Button> <Button variant="accent-muted">accent-muted</Button> <Button variant="muted">muted</Button> <Button variant="success">success</Button> <Button variant="destructive">destructive</Button> <Button variant="default">default</Button>
```

#### Button size

Set the `size` prop to `sm` or `lg` to decrease or increase the size of a `<Button>`:

size=“sm” size=“default” size=“lg”

Example code

```
import { Button } from '@stainless-api/docs/components';


<Button size="sm">size="sm"</Button> <Button size="default">size="default"</Button> <Button size="lg">size="lg"</Button>
```

### Callout

Use a `<Callout>` to emphasize important information, like warnings or noteworthy details.

Some important information.

Example code

```
import { Callout } from '@stainless-api/docs/components';


<Callout>
  Some important information.
</Callout>
```

#### Callout variants

Set the `variant` prop to one of the values in the examples below for different `<Callout>` use cases:

info

note

tip

success

warning

danger

Example code

```
import {  } from '@stainless-api/docs/components';


<Callout variant="info">
  info
</Callout>


<Callout variant="note">
  note
</Callout>


<Callout variant="tip">
  tip
</Callout>


<Callout variant="success">
  success
</Callout>


<Callout variant="warning">
  warning
</Callout>


<Callout variant="danger">
  danger
</Callout>
```

### Steps

Use our `<Steps>` and `<Step>` components for step-by-step instructions:

1. Read these docs

2. Allow your brain to process the information

3. You now know how to use our UI components!

Example code

```
import { Steps, Step } from '@stainless-api/docs/components';


<Steps>
  <Step>Read these docs</Step>
  <Step>Allow your brain to process the information</Step>
  <Step>You now know how to use our UI components!</Step>
</Steps>
```

## Other UI components

The Stainless Docs Platform is built on Astro, which means you’re free to use any basically any UI components you wish.

We provide [built-in support for React components](#add-a-react-component), but Astro supports many other frontend frameworks. Have a look at [Astro’s component documentation](https://docs.astro.build/en/basics/astro-components/) and [Astro’s guide to using framework components](https://docs.astro.build/en/guides/framework-components/#using-framework-components) for more details.

Currently, the Stainless Docs platform also supports [Starlight components](https://starlight.astro.build/components/using-components/), but the use of Starlight is considered an implementation detail that is subject to change.

To maintain compatibility with future versions of the Stainless Docs Platform, we recommend using Stainless UI components instead of Starlight components whenever possible.

### Add a React component

To add a React component to your site, we recommend you put the component’s code in a file in `src/components`:

src/components/Counter.tsx

```
import { useState } from "react";


export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      Counter: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
```

Next, import the component on any page of your site:

src/content/docs/example-page.mdx

```
---
title: Example page
---


import Counter from "/src/components/Counter.tsx";


This is an example page with a counter:


<Counter client:load />
```

Only add `client:load` when your component requires client-side interactivity, or when your component must be rendered client-side to function properly.

Components without `client:load` will be rendered server-side at build time to decrease bundle sizes and increase client-side performance, but they will not be interactive. See the [Astro client-directives documentation](https://docs.astro.build/en/reference/directives-reference/#client-directives) for more information.