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

# Wrappers

> Containers that hold, group, or spatially arrange other components.

<Note>
  **Generation Script**: This file is generated from script(s): `operations/scripts/generators/components/documentation/generate-component-docs.js`. <br />
  **Purpose**: Generated component-library MDX pages derived from docs-guide/config/component-registry.json. <br />
  **Run when**: Component governance metadata, registry outputs, or published component-library templates change. <br />
  **Important**: Do not manually edit this file; run `node operations/scripts/generators/components/documentation/generate-component-docs.js --fix --template-only --category wrappers`. <br />
</Note>

<Card title="Back to Component Library" icon="arrow-left" href="/v2/resources/documentation-guide/component-library" arrow>
  Return to the generated component library landing page.
</Card>

## Wrappers

Containers that hold, group, or spatially arrange other components.

This category currently contains **31** governed export(s).

### Decision Tree Excerpt

1. Fetches, embeds, or binds to external/third-party data? → `integrators/`
2. Part of the page's outer structure, typically used once? → `scaffolding/`
3. Takes content and presents it in a formatted way? → `displays/`
4. Exists to hold, group, or arrange other things? → `wrappers/`
5. Single visual piece – no wrapping, no arranging, no fetching? → `elements/`

### Summary Table

| Component          | Status    | Import path                                                       | Description                                                                                  |
| ------------------ | --------- | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| AccordionGroupList | `stable`  | `/snippets/components/wrappers/accordions/AccordionGroupList.jsx` | Generates N numbered accordion sections inside an AccordionGroup.                            |
| AccordionLayout    | `stable`  | `/snippets/components/wrappers/accordions/AccordionLayout.jsx`    | Vertical stack layout with small gap, designed for accordion content sections.               |
| BasicList          | `planned` | `/snippets/components/wrappers/lists/Lists.jsx`                   | Planned list component – not yet implemented.                                                |
| BorderedBox        | `stable`  | `/snippets/components/wrappers/containers/Containers.jsx`         | Bordered container with configurable radius and background.                                  |
| CardCarousel       | `stable`  | `/snippets/components/wrappers/grids/CardCarousel.jsx`            | Paginated horizontal carousel with prev/next navigation and dot indicators.                  |
| CenteredContainer  | `stable`  | `/snippets/components/wrappers/containers/Containers.jsx`         | Horizontally centred container with configurable max-width.                                  |
| DisplayCard        | `stable`  | `/snippets/components/wrappers/cards/CustomCards.jsx`             | Card with icon, custom title row, and body content.                                          |
| DynamicTable       | `stable`  | `/snippets/components/wrappers/tables/Table.jsx`                  | Renders structured data as a scrollable table with section separators and accessible region. |
| FlexContainer      | `stable`  | `/snippets/components/wrappers/containers/Layout.jsx`             | Flexbox container with configurable direction, gap, and alignment.                           |
| FullWidthContainer | `stable`  | `/snippets/components/wrappers/containers/Containers.jsx`         | Full-viewport-width container that breaks out of parent padding.                             |
| GridContainer      | `stable`  | `/snippets/components/wrappers/containers/Layout.jsx`             | CSS Grid container with configurable columns and gap.                                        |
| IconList           | `planned` | `/snippets/components/wrappers/lists/Lists.jsx`                   | Planned icon list component – not yet implemented.                                           |
| InlineImageCard    | `stable`  | `/snippets/components/wrappers/cards/CustomCards.jsx`             | Card with inline image alongside content, using negative margin breakout.                    |
| InteractiveCard    | `stable`  | `/snippets/components/wrappers/cards/ShowcaseCards.jsx`           | Single interactive card with hover effects.                                                  |
| InteractiveCards   | `stable`  | `/snippets/components/wrappers/cards/ShowcaseCards.jsx`           | Multi-column layout of interactive cards.                                                    |
| ListSteps          | `stable`  | `/snippets/components/wrappers/lists/ListSteps.jsx`               | Renders an array of step items inside Mintlify Steps component.                              |
| QuadGrid           | `stable`  | `/snippets/components/wrappers/grids/QuadGrid.jsx`                | 2x2 grid with centred rotating icon overlay. Respects prefers-reduced-motion.                |
| ScrollBox          | `stable`  | `/snippets/components/wrappers/containers/ScrollBox.jsx`          | Scrollable container with max-height, overflow hint, and accessible region role.             |
| SearchTable        | `stable`  | `/snippets/components/wrappers/tables/SearchTable.jsx`            | Filterable table wrapper with search input and category dropdown.                            |
| ShowcaseCards      | `stable`  | `/snippets/components/wrappers/cards/ShowcaseCards.jsx`           | Paginated card layout with search, category, and product filtering.                          |
| Spacer             | `stable`  | `/snippets/components/wrappers/containers/Layout.jsx`             | Spacer element with configurable size.                                                       |
| StepLinkList       | `stable`  | `/snippets/components/wrappers/lists/Lists.jsx`                   | Renders listItems as Mintlify Steps with GotoLink navigation.                                |
| StepList           | `stable`  | `/snippets/components/wrappers/lists/Lists.jsx`                   | Renders listItems as Mintlify Steps with title, icon, and content.                           |
| StyledStep         | `stable`  | `/snippets/components/wrappers/steps/Steps.jsx`                   | Single step with configurable icon, size, and colour.                                        |
| StyledSteps        | `stable`  | `/snippets/components/wrappers/steps/Steps.jsx`                   | Wrapper around Mintlify Steps with custom icon styling via injected CSS.                     |
| StyledTable        | `stable`  | `/snippets/components/wrappers/tables/Tables.jsx`                 | Full-width table with header row styling and rounded container.                              |
| TableCell          | `stable`  | `/snippets/components/wrappers/tables/Tables.jsx`                 | Table cell that switches between th and td based on header prop.                             |
| TableRow           | `stable`  | `/snippets/components/wrappers/tables/Tables.jsx`                 | Table row with optional header styling and hover effect.                                     |
| UpdateLinkList     | `stable`  | `/snippets/components/wrappers/lists/Lists.jsx`                   | Renders update items as linked entries inside Mintlify Update component.                     |
| UpdateList         | `planned` | `/snippets/components/wrappers/lists/Lists.jsx`                   | Planned update list component – not yet implemented.                                         |
| WidthCard          | `stable`  | `/snippets/components/wrappers/cards/CustomCards.jsx`             | Width-constrained card wrapper with configurable percentage width.                           |

## Component Reference

### AccordionGroupList

Use **AccordionGroupList** when you need generates N numbered accordion sections inside an AccordionGroup.. Accepts: className, style, ...rest.
Source description: Generates N numbered accordion sections inside an AccordionGroup.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { AccordionGroupList } from '/snippets/components/wrappers/accordions/AccordionGroupList.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `num` | `number` | `1` | No | Number of placeholder accordion sections to render. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### AccordionLayout

Use **AccordionLayout** when you need vertical stack layout with small gap, designed for accordion content sections.. Accepts: children, className, style, ...rest.
Source description: Vertical stack layout with small gap, designed for accordion content sections.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { AccordionLayout } from '/snippets/components/wrappers/accordions/AccordionLayout.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `any` | \`\` | Yes | children prop. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### BasicList

Use **BasicList** when you need planned list component – not yet implemented.. Accepts: none.
Source description: Planned list component – not yet implemented.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { BasicList } from '/snippets/components/wrappers/lists/Lists.jsx'
```

**Metadata**

* Status: `planned`
* Accepts: `none`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `listItems` | `any` | \`\` | Yes | list Items prop. |

<CustomDivider />

### BorderedBox

Use **BorderedBox** when you need bordered container with configurable radius and background.. Accepts: children, className, ...rest.
Source description: Bordered container with configurable radius and background.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { BorderedBox } from '/snippets/components/wrappers/containers/Containers.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `any` | \`\` | Yes | children prop. |
  \| `variant` | `string` | `"default"` | No | variant prop. |
  \| `padding` | `string` | `"1rem"` | No | padding prop. |
  \| `borderRadius` | `string` | `"8px"` | No | border Radius prop. |
  \| `accentBar` | `string` | `""` | No | Optional accent border token applied to the left edge. |
  \| `style` | `object` | `{}` | No | style prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |

<CustomDivider />

### CardCarousel

Use **CardCarousel** when you need paginated horizontal carousel with prev/next navigation and dot indicators.. Accepts: children, className, ...rest.
Source description: Paginated horizontal carousel with prev/next navigation and dot indicators.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { CardCarousel } from '/snippets/components/wrappers/grids/CardCarousel.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `React.ReactNode` | ``| Yes | Content rendered inside the component. | | `visibleCount` | `number` | `3` | No | Visible count used by the component. | | `gap` | `string` | `"1.5rem"` | No | Gap used by the component. | | `showDots` | `boolean` | `true` | No | Boolean flag that controls component behaviour. | | `style` | `object` |`` | Yes | Style used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |

<CustomDivider />

### CenteredContainer

Use **CenteredContainer** when you need horizontally centred container with configurable max-width.. Accepts: children, className, ...rest.
Source description: Horizontally centred container with configurable max-width.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { CenteredContainer } from '/snippets/components/wrappers/containers/Containers.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `any` | \`\` | Yes | children prop. |
  \| `maxWidth` | `string` | `"800px"` | No | max Width prop. |
  \| `padding` | `string` | `"0"` | No | padding prop. |
  \| `preset` | `string` | `"default"` | No | Named width/layout preset for common documentation patterns. |
  \| `width` | `string` | `""` | No | Explicit width override. |
  \| `minWidth` | `string` | `""` | No | Explicit min-width override. |
  \| `marginRight` | `string` | `""` | No | Optional right margin override. |
  \| `marginBottom` | `string` | `""` | No | Optional bottom margin override. |
  \| `textAlign` | `string` | `""` | No | Optional text alignment override. |
  \| `style` | `object` | `{}` | No | style prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |

<CustomDivider />

### DisplayCard

Use **DisplayCard** when you need card with icon, custom title row, and body content.. Accepts: children, className, ...rest.
Source description: Card with icon, custom title row, and body content.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { DisplayCard } from '/snippets/components/wrappers/cards/CustomCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `icon` | `string` | ``| Yes | Icon configuration used by the component. | | `title` | `React.ReactNode` |`` | Yes | Title text rendered by the component. |
  \| `style` | `object` | ``| Yes | Style used by the component. | | `background` | `string` | `'var(--card-background)'` | No | Background used by the component. | | `children` | `React.ReactNode` |`` | Yes | Content rendered inside the component. |
  \| `className` | `string` | `""` | No | CSS class name. |

<CustomDivider />

### DynamicTable

Use **DynamicTable** when you need renders structured data as a scrollable table with section separators and accessible region.. Accepts: className, style, ...rest.
Source description: Renders structured data as a scrollable table with section separators and accessible region.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { DynamicTable } from '/snippets/components/wrappers/tables/Table.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `tableTitle` | `any` | `null` | No | table Title prop. |
  \| `headerList` | `Array` | `[` | No | ] - header List prop. |
  \| `itemsList` | `Array` | `[` | No | ] - items List prop. |
  \| `monospaceColumns` | `Array` | `[` | No | ] - monospace Columns prop. |
  \| `margin` | `any` | \`\` | Yes | margin prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### FlexContainer

Use **FlexContainer** when you need flexbox container with configurable direction, gap, and alignment.. Accepts: children, className, ...rest.
Source description: Flexbox container with configurable direction, gap, and alignment.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { FlexContainer } from '/snippets/components/wrappers/containers/Layout.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `any` | \`\` | Yes | children prop. |
  \| `direction` | `string` | `"row"` | No | direction prop. |
  \| `gap` | `string` | `"1rem"` | No | gap prop. |
  \| `align` | `string` | `"flex-start"` | No | align prop. |
  \| `justify` | `string` | `"flex-start"` | No | justify prop. |
  \| `wrap` | `boolean` | `false` | No | wrap prop. |
  \| `marginTop` | `string` | `""` | No | Optional top margin override. |
  \| `marginBottom` | `string` | `""` | No | Optional bottom margin override. |
  \| `style` | `object` | `{}` | No | style prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |

<CustomDivider />

### FullWidthContainer

Use **FullWidthContainer** when you need full-viewport-width container that breaks out of parent padding.. Accepts: children, className, ...rest.
Source description: Full-viewport-width container that breaks out of parent padding.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { FullWidthContainer } from '/snippets/components/wrappers/containers/Containers.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `any` | ``| Yes | children prop. | | `backgroundColor` | `any` |`` | Yes | background Color prop. |
  \| `style` | `object` | `{}` | No | style prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |

<CustomDivider />

### GridContainer

Use **GridContainer** when you need cSS Grid container with configurable columns and gap.. Accepts: children, className, ...rest.
Source description: CSS Grid container with configurable columns and gap.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { GridContainer } from '/snippets/components/wrappers/containers/Layout.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `any` | ``| Yes | children prop. | | `columns` | `any` |`` | Yes | columns prop. |
  \| `gap` | `string` | `"1rem"` | No | gap prop. |
  \| `style` | `object` | `{}` | No | style prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |

<CustomDivider />

### IconList

Use **IconList** when you need planned icon list component – not yet implemented.. Accepts: none.
Source description: Planned icon list component – not yet implemented.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { IconList } from '/snippets/components/wrappers/lists/Lists.jsx'
```

**Metadata**

* Status: `planned`
* Accepts: `none`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `listItems` | `any` | \`\` | Yes | list Items prop. |

<CustomDivider />

### InlineImageCard

Use **InlineImageCard** when you need card with inline image alongside content, using negative margin breakout.. Accepts: children, className, ...rest.
Source description: Card with inline image alongside content, using negative margin breakout.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { InlineImageCard } from '/snippets/components/wrappers/cards/CustomCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `React.ReactNode` | ``| Yes | Content rendered inside the component. | | `imgProps` | `object` |`` | Yes | Img props used by the component. |
  \| `imgStyle` | `object` | ``| Yes | Img style used by the component. | | `cardProps` | `object` |`` | Yes | Card props used by the component. |
  \| `style` | `object` | \`\` | Yes | Style used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |

<CustomDivider />

### InteractiveCard

Use **InteractiveCard** when you need single interactive card with hover effects.. Accepts: style, className, ...cardProps.
Source description: Single interactive card with hover effects.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { InteractiveCard } from '/snippets/components/wrappers/cards/ShowcaseCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...cardProps`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `mediaSrc` | `string` | `""` | No | media Src prop. |
  \| `logo` | `string` | `""` | No | logo prop. |
  \| `title` | `string` | `"Untitled project"` | No | title prop. |
  \| `subtitle` | `string` | `""` | No | subtitle prop. |
  \| `description` | `string` | `""` | No | description prop. |
  \| `href` | `string` | `"#"` | No | href prop. |
  \| `categoryTags` | `Array` | `[` | No | ] - category Tags prop. |
  \| `productTags` | `Array` | `[` | No | ] - product Tags prop. |
  \| `links` | `Array` | `[` | No | ] - links prop. |
  \| `style` | `any` | ``| Yes | style prop. | | `className` | `string` | `""` | No | CSS class name. | | `cardProps` | `any` |`` | Yes | card Props prop. |

<CustomDivider />

### InteractiveCards

Use **InteractiveCards** when you need multi-column layout of interactive cards.. Accepts: className, style, ...rest.
Source description: Multi-column layout of interactive cards.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { InteractiveCards } from '/snippets/components/wrappers/cards/ShowcaseCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### ListSteps

Use **ListSteps** when you need renders an array of step items inside Mintlify Steps component.. Accepts: className, style, ...rest.
Source description: Renders an array of step items inside Mintlify Steps component.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { ListSteps } from '/snippets/components/wrappers/lists/ListSteps.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `listItems` | `Array` | \`\` | Yes | Collection data rendered by the component. |
  \| `stepsConfig` | `object` | `{}` | No | Steps config used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### QuadGrid

Use **QuadGrid** when you need 2x2 grid with centred rotating icon overlay. Respects prefers-reduced-motion.. Accepts: children, className, style, ...rest.
Source description: 2x2 grid with centred rotating icon overlay. Respects prefers-reduced-motion.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { QuadGrid } from '/snippets/components/wrappers/grids/QuadGrid.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `React.ReactNode` | \`\` | Yes | Content rendered inside the component. |
  \| `icon` | `string` | `"arrows-spin"` | No | Icon configuration used by the component. |
  \| `iconSize` | `number` | `50` | No | Icon configuration used by the component. |
  \| `iconColor` | `string` | `"var(--accent)"` | No | Icon configuration used by the component. |
  \| `spinDuration` | `string` | `"10s"` | No | Spin duration used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### ScrollBox

Use **ScrollBox** when you need scrollable container with max-height, overflow hint, and accessible region role.. Accepts: children, className, ...rest.
Source description: Scrollable container with max-height, overflow hint, and accessible region role.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { ScrollBox } from '/snippets/components/wrappers/containers/ScrollBox.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `any` | ``| Yes | children prop. | | `maxHeight` | `number` | `300` | No | max Height prop. | | `showHint` | `boolean` | `true` | No | show Hint prop. | | `ariaLabel` | `string` | `"Scrollable content"` | No | aria Label prop. | | `style` | `any` |`` | Yes | style prop. |
  \| `className` | `string` | `""` | No | CSS class name. |

<CustomDivider />

### SearchTable

Use **SearchTable** when you need filterable table wrapper with search input and category dropdown.. Accepts: className, style, ...rest.
Source description: Filterable table wrapper with search input and category dropdown.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { SearchTable } from '/snippets/components/wrappers/tables/SearchTable.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `TableComponent` | `string` | `null` | No | Table component used by the component. |
  \| `tableTitle` | `React.ReactNode` | `null` | No | Table title used by the component. |
  \| `headerList` | `Array` | `[` | No | ] - Collection data rendered by the component. |
  \| `itemsList` | `Array` | `[` | No | ] - Collection data rendered by the component. |
  \| `monospaceColumns` | `Array` | `[` | No | ] - Collection data rendered by the component. |
  \| `margin` | `string` | \`\` | Yes | Margin used by the component. |
  \| `searchPlaceholder` | `string` | `'Search...'` | No | Search placeholder used by the component. |
  \| `searchColumns` | `Array` | `[` | No | ] - Collection data rendered by the component. |
  \| `categoryColumn` | `string` | `'Category'` | No | Category column used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### ShowcaseCards

Use **ShowcaseCards** when you need paginated card layout with search, category, and product filtering.. Accepts: className, style, ...rest.
Source description: Paginated card layout with search, category, and product filtering.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { ShowcaseCards } from '/snippets/components/wrappers/cards/ShowcaseCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `items` | `Array` | `[` | No | ] - items prop. |
  \| `limit` | `any` | `null` | No | limit prop. |
  \| `pageSize` | `number` | `10` | No | page Size prop. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

<CustomDivider />

### Spacer

Use **Spacer** when you need element with configurable size.. Accepts: className, style, ...rest.
Source description: Spacer element with configurable size.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { Spacer } from '/snippets/components/wrappers/containers/Layout.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `size` | `string` | `"1rem"` | No | size prop. |
  \| `direction` | `string` | `"vertical"` | No | direction prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### StepLinkList

Use **StepLinkList** when you need renders listItems as Mintlify Steps with GotoLink navigation.. Accepts: className, style, ...rest.
Source description: Renders listItems as Mintlify Steps with GotoLink navigation.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { StepLinkList } from '/snippets/components/wrappers/lists/Lists.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `listItems` | `any` | \`\` | Yes | list Items prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### StepList

Use **StepList** when you need renders listItems as Mintlify Steps with title, icon, and content.. Accepts: className, style, ...rest.
Source description: Renders listItems as Mintlify Steps with title, icon, and content.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { StepList } from '/snippets/components/wrappers/lists/Lists.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `listItems` | `any` | \`\` | Yes | list Items prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### StyledStep

Use **StyledStep** when you need single step with configurable icon, size, and colour.. Accepts: children, className, style, ...rest.
Source description: Single step with configurable icon, size, and colour.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { StyledStep } from '/snippets/components/wrappers/steps/Steps.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `title` | `any` | ``| Yes | title prop. | | `icon` | `any` |`` | Yes | icon prop. |
  \| `titleSize` | `string` | `"h3"` | No | title Size prop. |
  \| `children` | `any` | \`\` | Yes | children prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### StyledSteps

Use **StyledSteps** when you need wrapper around Mintlify Steps with custom icon styling via injected CSS.. Accepts: children, className, style, ...rest.
Source description: Wrapper around Mintlify Steps with custom icon styling via injected CSS.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { StyledSteps } from '/snippets/components/wrappers/steps/Steps.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `any` | ``| Yes | children prop. | | `iconColor` | `any` |`` | Yes | icon Color prop. |
  \| `titleColor` | `any` | ``| Yes | title Color prop. | | `lineColor` | `any` |`` | Yes | line Color prop. |
  \| `iconSize` | `string` | `"24px"` | No | icon Size prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

<CustomDivider />

### StyledTable

Use **StyledTable** when you need full-width table with header row styling and rounded container.. Accepts: children, className, ...rest.
Source description: Full-width table with header row styling and rounded container.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { StyledTable } from '/snippets/components/wrappers/tables/Tables.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `any` | \`\` | Yes | children prop. |
  \| `variant` | `string` | `"default"` | No | variant prop. |
  \| `style` | `object` | `{}` | No | style prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |

<CustomDivider />

### TableCell

Use **TableCell** when you need table cell that switches between th and td based on header prop.. Accepts: children, className, ...rest.
Source description: Table cell that switches between th and td based on header prop.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { TableCell } from '/snippets/components/wrappers/tables/Tables.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `any` | \`\` | Yes | children prop. |
  \| `align` | `string` | `"left"` | No | align prop. |
  \| `header` | `boolean` | `false` | No | header prop. |
  \| `style` | `object` | `{}` | No | style prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |

<CustomDivider />

### TableRow

Use **TableRow** when you need table row with optional header styling and hover effect.. Accepts: children, className, ...rest.
Source description: Table row with optional header styling and hover effect.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { TableRow } from '/snippets/components/wrappers/tables/Tables.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `any` | \`\` | Yes | children prop. |
  \| `header` | `boolean` | `false` | No | header prop. |
  \| `hover` | `boolean` | `false` | No | hover prop. |
  \| `style` | `object` | `{}` | No | style prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |

<CustomDivider />

### UpdateLinkList

Use **UpdateLinkList** when you need renders update items as linked entries inside Mintlify Update component.. Accepts: none.
Source description: Renders update items as linked entries inside Mintlify Update component.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { UpdateLinkList } from '/snippets/components/wrappers/lists/Lists.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `none`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `listItems` | `any` | \`\` | Yes | list Items prop. |

<CustomDivider />

### UpdateList

Use **UpdateList** when you need planned update list component – not yet implemented.. Accepts: none.
Source description: Planned update list component – not yet implemented.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { UpdateList } from '/snippets/components/wrappers/lists/Lists.jsx'
```

**Metadata**

* Status: `planned`
* Accepts: `none`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `listItems` | `any` | \`\` | Yes | list Items prop. |

<CustomDivider />

### WidthCard

Use **WidthCard** when you need width-constrained card wrapper with configurable percentage width.. Accepts: children, className, style, ...rest.
Source description: Width-constrained card wrapper with configurable percentage width.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { WidthCard } from '/snippets/components/wrappers/cards/CustomCards.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, className, style, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `width` | `string` | `'80%'` | No | Width used by the component. |
  \| `children` | `React.ReactNode` | ``| Yes | Content rendered inside the component. | | `cardProps` | `object` |`` | No | Forwarded Card props. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |