Plan comparison

Compare meaningful differences between plans and billing periods.

npx shadcn@latest add @silicon-ui/plan-comparison
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/plan-comparison

Manually

  1. Install the dependencies.

    npm install @radix-ui/react-switch lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/blocks/plan-comparison/plan-comparison.tsx
    • components/silicon-ui/blocks/plan-comparison/plan-comparison.module.css
    • components/silicon-ui/switch/switch.tsx shared
    • components/silicon-ui/switch/switch.module.css shared
    • components/silicon-ui/segmented-control/segmented-control.tsx shared
    • components/silicon-ui/segmented-control/segmented-control.module.css shared
    • components/silicon-ui/button/button.tsx shared
    • components/silicon-ui/button/button.module.css shared

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { PlanComparison } from "@/components/silicon-ui/blocks/plan-comparison/plan-comparison";

Dependencies

npm
@radix-ui/react-switchlucide-reactmotion
Registry
silicon-motion-tokensbuttonsegmented-controlswitch