---
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
source_url:
  html: https://hyperlint-automation-repository-scan-0098fc0.preview.developers.cloudflare.com/style-guide/components/plan/index.md
  md: https://hyperlint-automation-repository-scan-0098fc0.preview.developers.cloudflare.com/style-guide/components/plan/
---

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.
