---
title: Plan · Cloudflare Style Guide
description: "The plan component lets you define what type of plan your product
  needs. There are two ways to use it: in the main Overview page of your
  product, or in a page where you need to talk about a specific feature with
  additional requirements."
lastUpdated: 2025-03-06T20:33:22.000Z
chatbotDeprioritize: true
source_url:
  html: https://developers.cloudflare.com/style-guide/components/plan/
  md: https://developers.cloudflare.com/style-guide/components/plan/index.md
---

The plan component lets you define what type of plan your product needs. There are two ways to use it: in the main [Overview page](https://developers.cloudflare.com/style-guide/documentation-content-strategy/content-types/overview/) of your product, or in a page where you need to talk about a specific feature with additional requirements.

In the Overview page, use `<Plan type="<PLAN_TYPE>" />` To specify a special feature use `<Plan id="<FIRST_PRODUCT>.<SECOND-PRODUCT>.properties.availability.summary" />`. This component pulls information from the `index.json` file in `src/content/plans/`.

Refer to the examples below for more information.
