Skip to content
Cloudflare Docs

Components

All of the components available to contributors writing content on Cloudflare's developer documentation are documented in this section.

What is a component?

Astro components ↗ are re-usable HTML templates which we use to reduce maintenance burden & duplicated code by returning frequently used layouts or snippets into a component that can be imported and used across various pages.

Using components

Content is authored in MDX ↗, which allows JavaScript expressions and components to be used. They are like HTML elements, which can be self-closing.

...stuvwxyz

Open me!

Hello, world!

 
import { Details, RuleID } from "~/components"


{/* Self-closing component */}
<RuleID id="abcdefghijklmnopqrstuvwxyz" />


<br/> {/* Line break to separate rendered components */}


{/* Component with inside content */}
<Details header="Open me!">
    Hello, world!
</Details>

Importing

Components need to be imported to be made available inside a MDX file. All of our components are exported from "~/components", so they would be imported like this:

import { Card, Render } from "~/components"
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings