---
description: Browse available MDX components for Cloudflare docs.
title: Components
image: https://developers.cloudflare.com/style-guide/build-the-page/components/og.png?v=5184224073dce738
---
[Skip to content](#main-content)
> Documentation Index
> Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt
> Use this file to discover all available pages before exploring further.
# Components
Last updated Aug 20, 2026|Copy as Markdown| [View as Markdown](https://developers.cloudflare.com/style-guide/build-the-page/components/index.md)| [Agent setup](https://developers.cloudflare.com/agent-setup/)
When you are [contributing to the Cloudflare Docs](https://developers.cloudflare.com/style-guide/contributions/), 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 ↗︎](https://docs.astro.build/en/basics/astro-components/) and are written in [MDX ↗︎](https://docs.astro.build/en/guides/markdown-content/), an extended version of Markdown. [Learn more about the Cloudflare Docs framework](https://developers.cloudflare.com/style-guide/how-we-docs/our-site/#site-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](https://developers.cloudflare.com/style-guide/build-the-page/frontmatter/):
```mdx
import { COMPONENT_NAME } from "~/components";
;
```
For example, if you were to add [the `DashButton` component](https://developers.cloudflare.com/style-guide/build-the-page/components/dash-button/) to the [Images getting started page](https://developers.cloudflare.com/images/get-started/), the top of the MDX file corresponding to that page would look like the following:
```mdx
---
pcx_content_type: get-started
title: Getting started
products:
- images
sidebar:
order: 2
---
import { DashButton } from "~/components";
;
```
Page-specific wrapper components or one-off components do not need to be added to the barrel — import them via a deep path:
```mdx
import BaseSchemaProperties from "~/components/BaseSchemaProperties.astro";
```
2. Add the component to the page by adding this text anywhere on the page you want the component to appear:
```mdx
```
For example, if you were to add the `DashButton` component to some steps in the [Images getting started page](https://developers.cloudflare.com/images/get-started/), here is how the MDX file would look:
```mdx
1. In the Cloudflare dashboard, go to the **Transformations** page.
2. Go to the specific zone where you want to enable transformations.
```
This is how this example would display after it is published:
## Choose the right component
To choose the right component for your use case, browse this table which contains our most commonly used components and a visual example of each. For full documentation on all available components and their use cases, browse the individual component pages in this Style Guide.
| Component | Description & visual example |
| --- | --- |
| [`APIRequest`](https://developers.cloudflare.com/style-guide/build-the-page/components/api-request/) | Styled API request block. Generate executable cURL API commands with the required API token permissions. |
| [`Badge`](https://developers.cloudflare.com/style-guide/build-the-page/components/badges/) | Small descriptive pill. Label content with status, version, category, or other short metadata. |
| [`DashButton`](https://developers.cloudflare.com/style-guide/build-the-page/components/dash-button/) | Dashboard deep-link button. Directly link users from documentation into a specific, relevant section of the Cloudflare Dashboard. |
| [`Details`](https://developers.cloudflare.com/style-guide/build-the-page/components/details/) | Click-to-expand content block. Hide non-essential, complex, or advanced technical content, allowing users to expand the section when needed. |
| [`DirectoryListing`](https://developers.cloudflare.com/style-guide/build-the-page/components/directory-listing) | Auto-generated sub-page list. Automatically generate a navigable list of links to sub-pages within a specified documentation folder path. |
| [`Feature`](https://developers.cloudflare.com/style-guide/build-the-page/components/feature/) | Product feature list item. Highlight a product feature with a description and a direct link button. |
| [`GlossaryTooltip`](https://developers.cloudflare.com/style-guide/build-the-page/components/glossary-tooltip/) | Hover-activated glossary popup. Provide non-disruptive, hover-activated definitions for technical terms pulled from the documentation glossary. |
| [`LinkCard`](https://developers.cloudflare.com/style-guide/build-the-page/components/link-cards/) | Navigational cards. Present related tutorials, concepts, or guides in a visually engaging format. |
| [`PackageManagers`](https://developers.cloudflare.com/style-guide/build-the-page/components/package-managers) | Command switcher tabs. Display equivalent installation or execution commands for different package managers. |
| [`Plan`](https://developers.cloudflare.com/style-guide/build-the-page/components/plan/) | Product plan availability badge. Show the plan required for a product or specific feature. |
| [`RelatedProduct`](https://developers.cloudflare.com/style-guide/build-the-page/components/related-product/) | Formatted product reference. Visually highlight and link to a specific, complementary Cloudflare product, also featuring the product's logo. |
| [`ResourcesBySelector`](https://developers.cloudflare.com/style-guide/build-the-page/components/resources-by-selector/) | Filterable code example library. Pull and display lists of code examples and resources based on content type or products. |
| [`Stream`](https://developers.cloudflare.com/style-guide/build-the-page/components/stream/) | Embeddable video player. Display a video player optimized for Cloudflare Stream. |
| [`Tabs` and `TabItem`](https://developers.cloudflare.com/style-guide/build-the-page/components/tabs/) | Switchable content tabs. Allow easy switching between content views for different code languages or configuration methods. |
| [`Type` and `MetaInfo`](https://developers.cloudflare.com/style-guide/build-the-page/components/type-highlighting/) | Pill-shaped data type badge and metadata annotation about a field or property. `Type` indicates API parameter data types (`String`, `Integer`) and `MetaInfo` indicates metadata constraints (`Required`, `Optional`, `Read-only`). |
| [`WranglerConfig`](https://developers.cloudflare.com/style-guide/build-the-page/components/wrangler-config/) | Tabbed Wrangler config display. Show Wrangler configuration files (JSONC and TOML) and bindings with automatic format switching. |
| [`YouTube`](https://developers.cloudflare.com/style-guide/build-the-page/components/youtube/) | Embeddable video player. Embeds a YouTube video player with a specified video ID. |
Was this helpful?
YesNo
## On this page
[Docs](https://developers.cloudflare.com/)
```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/build-the-page/components/#page","headline":"Components","description":"Browse available MDX components for Cloudflare docs.","url":"https://developers.cloudflare.com/style-guide/build-the-page/components/","inLanguage":"en","image":"https://developers.cloudflare.com/style-guide/build-the-page/components/og.png?v=5184224073dce738","dateModified":"2026-08-20","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```