---
title: Custom Components
description: Using custom components with docs.page
---

# Custom Components

The docs.page project is built on-top of [MDX](https://github.com/mdx-js/mdx). MDX allows
custom React components to be written within the Markdown content and rendered.

docs.page provides some useful components to help address common documentation trends.

> Please submit a PR or issue if you require a custom component.

## `<Tabs />`

The `Tabs` component allows you to specify content which can be rendered within tabs:

```
<Tabs
  defaultValue="apple"
  values={[
    {label: 'Apple', value: 'apple'},
    {label: 'Orange', value: 'orange'},
    {label: 'Banana', value: 'banana'},
  ]}>
  <TabItem value="apple">This is an apple 🍎</TabItem>
  <TabItem value="orange">This is an orange 🍊</TabItem>
  <TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
```

<Tabs
  defaultValue="apple"
  values={[
    { label: 'Apple', value: 'apple' },
    { label: 'Orange', value: 'orange' },
    { label: 'Banana', value: 'banana' },
  ]}
>
  <TabItem value="apple">This is an apple 🍎</TabItem>
  <TabItem value="orange">This is an orange 🍊</TabItem>
  <TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>

### Synchronization

The component also allows you to synchronize selected tab choices by providing a `groupId` property:

<Tabs
  groupId="fruit"
  defaultValue="apple"
  values={[
    { label: 'Apple', value: 'apple' },
    { label: 'Orange', value: 'orange' },
    { label: 'Banana', value: 'banana' },
  ]}
>
  <TabItem value="apple">This is an apple 🍎</TabItem>
  <TabItem value="orange">This is an orange 🍊</TabItem>
  <TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>

<Tabs
  groupId="fruit"
  defaultValue="apple"
  values={[
    { label: 'Apple', value: 'apple' },
    { label: 'Orange', value: 'orange' },
    { label: 'Banana', value: 'banana' },
  ]}
>
  <TabItem value="apple">This is an apple 🍎</TabItem>
  <TabItem value="orange">This is an orange 🍊</TabItem>
  <TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>

## `<Image />`

Basic Markdown syntax for images works out of the box (e.g. `![alt tag](src)`), however using the `Image`
component directly allows for a bit more control on some of the properties.

### Zooming

By default, images are not zoomable (unless overridden via [configuration](/configuration)). Pass the `zoom` property to the component to enable image zooming:

```
<Image src="https://via.placeholder.com/350x150" zoom />
```

<Image src="https://via.placeholder.com/350x150" zoom />

### Captions

To add a caption to images, provide the caption property:

```
<Image src="https://via.placeholder.com/350x150" caption="A pretty caption!" />
```

<Image src="https://via.placeholder.com/350x150" caption="A pretty caption!" />

## `<Heading />`

The `Heading` component renders a heading tag, by proving a `type` property:

```
<Heading type="h1">Heading 1</Heading>
<Heading type="h2">Heading 2</Heading>
<Heading type="h3">Heading 3</Heading>
<Heading type="h4">Heading 4</Heading>
<Heading type="h5">Heading 5</Heading>
<Heading type="h6">Heading 6</Heading>
```

<Heading type="h1">Heading 1</Heading>
<Heading type="h2">Heading 2</Heading>
<Heading type="h3">Heading 3</Heading>
<Heading type="h4">Heading 4</Heading>
<Heading type="h5">Heading 5</Heading>
<Heading type="h6">Heading 6</Heading>

In most cases, using this component is not required and raw Markdown can be used instead.

## `<YouTube />`

The `YouTube` component renders an embedded YouTube video by providing a video id:

```
<YouTube id="dQw4w9WgXcQ" />
```

<YouTube id="dQw4w9WgXcQ" />

## `<Vimeo />`

The `Vimeo` component renders an embedded Vimeo video by providing a video id:

```
<Vimeo video="253989945" />
```

<Vimeo video="253989945" />

This wraps [@ui-wave/react-video](https://www.npmjs.com/package/@u-wave/react-vimeo), and accepts lots of optional parameters
which can be found in their documentation.

We also support a `caption` property for adding captions to your videos.

## `<Tweet />`

The `Tweet` component renders an embedded Tweet by providing a tweet id:

```
<Tweet id="1513662173796605958" />
```

<Tweet id="1513662173796605958" />

This component accepts the following props:

| Key            | Type     | Description                                                                                                           | Default  |
| -------------- | -------- | --------------------------------------------------------------------------------------------------------------------- | -------- |
| `id`           | `string` | The numerical ID of the desired Tweet.                                                                                |          |
| `cards`        | `string` | When set to hidden, links in a Tweet are not expanded to photo, video, or link previews.                              | `hidden` |
| `conversation` | `string` | When set to `none`, only the cited Tweet will be displayed even if it is in reply to another Tweet.                   | `none`   |
| `theme`        | `string` | When set to `dark`, displays Tweet with light text over a dark background.                                            | `light`  |
| `width`        | `number` | The maximum width of the rendered Tweet in whole pixels. This value should be between 250 and 550 pixels.             |          |
| `align`        | `string` | Float the Tweet left, right, or center relative to its container.                                                     |          |
| `lang`         | `string` | A supported Twitter language code. Note: doesn't change text of actual tweet.                                         |          |
| `dnt`          | `string` | When `true`, the Tweet and its embedded page are not used for purposes that include personalized suggestions and ads. | `true`   |

This component is built on top of the Twitter embedded tweet API, more information can be found [here](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference).