Command Palette

Search for a command to run...

Docs
Pricing Tiers

Pricing Tiers

Modern pricing component with customizable tiers, features, and glass morphism design

Loading...

Installation

Usage

import Pricing, { Plan } from "@/components/ruixen/pricing-tiers";
 
const plans: Plan[] = [
  {
    title: "Starter",
    price: "$0",
    period: "/mo",
    description: "For individuals starting out",
    features: [
      "Access to core features",
      "Community support",
      "Limited projects (up to 3)",
    ],
  },
  {
    title: "Professional",
    price: "$29",
    period: "/mo",
    description: "For freelancers and small teams",
    features: [
      "All Starter features",
      "Priority support",
      "Unlimited projects",
    ],
    badge: "Popular",
  },
];
 
export default function App() {
  return (
    <Pricing
      plans={plans}
      heading="Choose the Right Plan"
      subheading="Flexible pricing that scales with your business"
    />
  );
}

Props

PropTypeDefaultDescription
plansPlan[]-Array of pricing plan objects
headingstring-Main heading text
subheadingstring-Subtitle text

Plan Object

PropertyTypeDescription
titlestringPlan name
pricestringPrice display
periodstringBilling period
descriptionstringPlan description
featuresstring[]List of features
badgestringOptional badge text

Features

  • Glass Morphism Design: Modern translucent card styling
  • Responsive Layout: Adapts to different screen sizes
  • Feature Lists: Checkmark icons for feature items
  • Badge Support: Highlight popular or recommended plans
  • Customizable: Easy to modify colors and styling
  • TypeScript Support: Full type safety

Use Cases

Perfect for:

  • SaaS Pricing Pages: Software subscription tiers
  • Service Packages: Different service levels
  • Product Variants: Multiple product options
  • Membership Plans: Subscription-based services
  • Feature Comparison: Side-by-side plan comparison