Skip to main content

Searchbar

The Searchbar component is a wrapper you can add to tables, accordions and cards. It'll show a input to let users filter the content inside the wrapper. Below you see examples.

Tables​

IDNameAgeCountryScore
1Alice25USA87
2Bob30Canada92
3Charlie28UK75
4David35Australia80
5Emma22Germany95
Code for table searchbar
<Searchbar>
| ID  | Name      | Age | Country      | Score |
|---- |----------|---- |-------------|-------|
| 1   | Alice    | 25  | USA         | 87    |
| 2   | Bob      | 30  | Canada      | 92    |
| 3   | Charlie  | 28  | UK          | 75    |
| 4   | David    | 35  | Australia   | 80    |
| 5   | Emma     | 22  | Germany     | 95    |
</Searchbar>

Cards​

Preview Changes

Preview your changes locally before making them live.

Customize Style

Make your docs aligned with your company's branding.

Create Pages

Start creating MDX pages with your content.

Reference APIs

Automatically generate endpoint pages from an OpenAPI spec.

Use Templates

Accelerate your docs with ready-to-use templates.

Integrate Analytics

Get insights on how users are interacting with your docs.

Accordion​

Accordion with Callout

Feel free to add other components inside an Accordion, like Callouts.

Tip

Accordions are great show or hide content.

Accordion with Code Block

You can also add code blocks here.

const axios = require('axios');

let config = {
 method: 'get',
 maxBodyLength: Infinity,
 url: 'https://api.example.com/v1/items',
 headers: { 
    'Accept': 'application/json'
 }
};