> ## Documentation Index
> Fetch the complete documentation index at: https://context7.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React components

> Define a small custom component in MDX

Define the component with an ESM export, then use it in the page.

## Usage

```mdx theme={null}
export const Status = ({ children }) => (
  <Badge color="green">{children}</Badge>
)

The API is <Status>ready</Status>.
```

Keep custom components small. Use a shared MDX or JSX snippet when several pages need the same component.

## Example

export const ExampleStatus = ({children}) => <Badge color="green">{children}</Badge>;

The API is <ExampleStatus>ready</ExampleStatus>.