@allem-ui/pricing

Pricing table and comparison components for Allem UI -- pricing cards, billing toggles, feature lists, and side-by-side plan comparisons.

Installation

npm install @allem-ui/pricing @allem-ui/react @allem-ui/theme

Tailwind CSS Setup

Add the following to your main CSS file (e.g. globals.css) so Tailwind generates the utility classes used by the components:

@import "tailwindcss";
@source "@allem-ui/react";
@source "@allem-ui/pricing";
@source "@allem-ui/theme";

Note: The @source directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.

Quick Start

import {
  PricingCard,
  PricingToggle,
  FeatureList,
} from "@allem-ui/pricing";

export function PricingPage() {
  const [billing, setBilling] = useState<"monthly" | "yearly">("monthly");

  return (
    <div>
      <PricingToggle value={billing} onChange={setBilling} />
      <PricingCard
        title="Pro"
        price={billing === "monthly" ? "$19" : "$190"}
        period={billing === "monthly" ? "/month" : "/year"}
        highlighted
      >
        <FeatureList
          features={[
            { label: "Unlimited projects", included: true },
            { label: "Priority support", included: true },
            { label: "Custom domain", included: true },
          ]}
        />
      </PricingCard>
    </div>
  );
}

Components

| Component | Description | |-----------|-------------| | PricingCard | Individual pricing tier card with price, features, and CTA | | PricingToggle | Monthly/yearly billing toggle switch | | PricingTable | Layout container for multiple pricing cards | | FeatureList | Checklist of included/excluded features | | PricingComparisonTable | Side-by-side feature comparison across plans |

Features

• SaaS-ready -- Drop-in pricing page components for subscription products
• Billing toggle -- Monthly/yearly toggle with price switching
• Comparison tables -- Feature-by-feature plan comparison with categories
• Highlighted plans -- Visually emphasize recommended pricing tiers
• Dark mode -- First-class dark mode with dark: Tailwind prefix
• TypeScript strict -- Full type safety with exported prop types
• Tree-shakeable -- ESM + CJS builds, import only what you use

Part of Allem UI

This is a standalone package in the Allem UI monorepo. For core components, see @allem-ui/react.

Support

If you find Allem UI useful, consider supporting its development:

License

MIT - Ahmed Allem