Last updated 1 month ago

Using 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:

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

Or multiple components at the same time:

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 corresponding documentation.

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.

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> (Id)
Pet (object) or Tag (object)
username
string >= 4 characters

User supplied username

firstName
string non-empty

User first name

lastName
string non-empty

User last name

email
string <email>

User email address

password
string <password> >= 8 characters /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/

User password, MUST contain a mix of upper and lower case letters, as well as digits

phone
string/^\+(?:[0-9]-?){6,14}[0-9]$/

User phone number in international format

userStatus
integer <int32>

User status

Content type
application/json
{
  • "id": 0,
  • "pet": {
    },
  • "username": "John78",
  • "firstName": "John",
  • "lastName": "Smith",
  • "email": "john.smith@example.com",
  • "password": "drowssaP123",
  • "phone": "+1-202-555-0192",
  • "userStatus": 0
}

Without samples panel:

User response

Response Schema: application/json
id
integer <int64> (Id)
Pet (object) or Tag (object)
username
string >= 4 characters

User supplied username

firstName
string non-empty

User first name

lastName
string non-empty

User last name

email
string <email>

User email address

password
string <password> >= 8 characters /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/

User password, MUST contain a mix of upper and lower case letters, as well as digits

phone
string/^\+(?:[0-9]-?){6,14}[0-9]$/

User phone number in international format

userStatus
integer <int32>

User status

Box

Read the box docs.

The box is a component for layout and spacing.

Buttons

Read the buttons docs.

Jumbotron

Read the jumbotron docs.

Might be good for a home page

or a landing page

Thin tiles/flex

Read the tile docs.

Wide tiles/flex

Read the tile docs.

Boxes/Flex

Read the flex/box docs.

Pet Store Chart

Typography

Read the typography docs.

This is an H1

Heading 2

Heading 3

Section header

Other components

What other components would you like to see? Let us know. We're adding new components.

Developing new components

A developer familiar with React can create new components. Learn more about how to create a component.

Read more about MDX.