Components

When you are contributing to the Cloudflare Docs, you can use our custom components to add additional formatting, such as buttons, tabs, and collapsible sections.

This guide shows you the basics of importing and adding a component to a page. Refer to each component page in this Style Guide to learn the specific props and requirements for each.

Our components are based on Astro components ↗ and are written in MDX ↗, an extended version of Markdown. Learn more about the Cloudflare Docs framework.

Add a component to a page

To add a component to a page:

1. Import the component to the page by adding this text directly below the frontmatter:

   import { COMPONENT_NAME } from "~/components";

   For example, if you were to add the DashButton component to the Images getting started page, the top of the MDX file corresponding to that page would look like the following:

   ---
   pcx_content_type: get-started
   title: Getting started
   sidebar:
     order: 2
   
   ---
   
   import { DashButton } from "~/components";

2. Add the component to the page by adding this text anywhere on the page you want the component to appear:

     <COMPONENT_NAME PROP_NAME="PROP_VALUE" />

   For example, if you were to add the DashButton component to some steps in the Images getting started page, here is how the MDX file would look:

   1. In the Cloudflare dashboard, go to the **Transformations** page.
   
    <DashButton url="/?to=/:account/images/delivery-zones" />
   
   2. Go to the specific zone where you want to enable transformations.

This is how this example would display after it is published: