Pricing Page Shadcn

Overview:

The Pricing Page made with Shadcn UI is a theme that allows users to create a pricing page that automatically adapts to the selected theme. It offers features like dark and light mode, monthly/yearly plan options, automatic calculation and highlighting of yearly plan savings, and the ability to highlight specific plans with tags.

Features:

• Dark & Light Mode: The theme supports both dark and light modes, allowing users to switch between the two.
• Monthly / Yearly Plan: Users can choose between monthly and yearly payment options for their plans.
• Yearly Plan savings automatically calculated and highlighted: The theme automatically calculates and highlights the savings of choosing the yearly payment option.
• “Popular” tag for highlighting a specific plan: Users can use a “Popular” tag to highlight a specific plan, making it stand out to users.
• “Exclusive” tag for highlighting a specific plan: The theme also offers an “Exclusive” tag to highlight a specific plan, giving it a sense of exclusivity.

Installation:

To install the Shadcn UI theme, follow these steps:

1. Run the following command in npm/pnpm/yarn: bunx shadcn-ui@latest init
2. Add the necessary components to your project: bunx shadcn-ui add dropdown-menu tabs card button
3. Install the next-themes package: bun i next-themes
4. Follow the official dark theme guide to setup the light/dark/system mode for your pricing page.

Summary:

The Pricing Page made with Shadcn UI is a versatile theme that offers a range of features to create a dynamic and user-friendly pricing page. With support for dark and light modes, different payment options, automatic savings calculation, and highlighting of specific plans, this theme provides users with the flexibility to create a pricing page that suits their needs. The installation process is straightforward, making it easy for users to integrate this theme into their projects.