Create content in MDX

An MDX file is a combination of Markdown and React components. Use MDX by naming the file extension as .mdx and importing the React components at the top of the file.

You can import a single component:

Copy

Copied

import { OpenApiResponse } from '@redocly/developer-portal/ui';

Or multiple components at the same time:

Copy

Copied

import {
  Alert,
  Box,
  Button,
  FlexSection,
  Flex,
  Jumbotron,
  H1,
  H2,
  H3,
  Link,
  OpenApiResponse,
  ThinTile,
  WideTile,
  Emphasis,
  SectionHeader,
 } from '@redocly/developer-portal/ui';

We created a library (@redocly/developer-portal/ui) with components you can reference within any MDX file.

Learn how to use some of our popular UI components in the UI components documentation section.

You may also create your own custom components.

Layouts

By default, the MDX page will have a similar page layout as a plain markdown file. To make a page with a different layout, such as a marketing landing page, use a custom layout.

Copy

Copied

import { LandingLayout } from @redocly/developer-portal/ui;

export  default LandingLayout;

UI components tour

Each component is documented.

Alerts

Read the alerts docs.

Alert

Attention: Now that I have your attention...

Success: Hooyah!

This is a header

Warning: I told you so!

Danger: I really told you so!

OpenAPI response

Read the API response docs.

With samples panel:

User response

Response Schema: application/json

id	integer <int64>
username	string
firstName	string
lastName	string
email	string
password	string
phone	string
userStatus	integer <int32> User Status

application/json

{"id": 0,
"username": "string",
"firstName": "string",
"lastName": "string",
"email": "string",
"password": "string",
"phone": "string",
"userStatus": 0
}