Plan Group

Installation

npx shadcn@latest add "https://billui.com/r/plan-group.json"

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";

import { cn } from "@/lib/utils";
import { PlanCardPrice } from "./plan-card";

// ... component code

Examples

Horizontal Card Layout

Use layout="horizontal" on PlanCard combined with layout="vertical" on PlanGroupContent to create a row-style pricing list.

Default Yearly Period

Set defaultPeriod="year" to show yearly prices by default.

Custom Toggle Labels

Customize the toggle labels with monthLabel and yearLabel.

Without Header

You can use PlanGroup without a header for simpler use cases.

API Reference

PlanGroup

The root container component that provides context for billing period state.

PlanGroupHeader

Container for the title, description, and toggle.

PlanGroupTitle

The main heading for the pricing section.

PlanGroupDescription

Supporting text below the title.

PlanGroupToggle

Toggle button for switching between monthly and yearly billing.

PlanGroupContent

Grid container for the pricing cards.

PlanPrice

Price display that responds to the billing period toggle. Use this instead of PlanCardPrice when you want the price to change with the toggle.

usePlanGroup

Hook to access the billing period state from child components.

const { period, setPeriod } = usePlanGroup();