UI components

Stainless components

We provide the following components in the Stainless Docs Platform:

• Accordion
• Badge
• Button
• Callout
• 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 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 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 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

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 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, but Astro supports many other frontend frameworks. Have a look at Astro’s component documentation and Astro’s guide to using framework components for more details.

Currently, the Stainless Docs platform also supports Starlight 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 for more information.