Use components in React pages

Products:RevelRealm

Plans:ProEnterpriseEnterprise+

There are several ways to use theme components. Below are some of the most common approaches.

For the list of components you can customize, see Built-in React components. For icons, see List of customizable icons.

We use the Admonition component as an example to illustrate different integration methods.

Use components directly on a page

You can import a component directly and use it inside a page.

Create a page file.
Import the component.
Use it on your React page.

Example of component used directly

test.page.tsx

import * as React from 'react';

import { Admonition } from '@redocly/theme/components/Admonition/Admonition';

export const frontmatter = {
  seo: {
    title: 'Test',
  },
};

export default function () {
  return (
    <div>
      <Admonition type="warning">Test</Admonition>
    </div>
  );
}

Rendered output

Screenshot of admonition used directly in a page

Use components inside a custom wrapper

You can also build your own custom components that internally use theme components. This is useful when you want to encapsulate specific logic or structure.

Project structure example:

│├──components/│   └──InfoRow.tsx└──test.page.tsx

Example of component in a wrapper

InfoRow.tsx

import * as React from 'react';
import styled from 'styled-components';

import { Admonition } from '@redocly/theme/components/Admonition/Admonition';

export const InfoRow = () => {
  return (
    <Wrapper>
      <Admonition type="warning">Test</Admonition>
      <Admonition type="warning">Test</Admonition>
      <Admonition type="warning">Test</Admonition>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  display: flex;
  flex-direction: row;
  gap: 10px;
`;