Components
All of the components available to contributors writing content on Cloudflare's developer documentation are documented in this section.
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.
Content is authored in MDX ↗, which allows JavaScript expressions and components to be used. They are like HTML elements, which can be self-closing.
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>
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"
Was this helpful?
- Resources
- API
- New to Cloudflare?
- Products
- Sponsorships
- Open Source
- Support
- Help Center
- System Status
- Compliance
- GDPR
- Company
- cloudflare.com
- Our team
- Careers
- 2025 Cloudflare, Inc.
- Privacy Policy
- Terms of Use
- Report Security Issues
- Trademark