Shadcn UI Pricing Block
The Pricing34 component presents a streamlined interface for selecting and displaying pricing plans, utilizing the shadcn block for effortless integration of tailored elements. Designed to simplify the decision-making process, this component features a toggle group that allows users to switch seamlessly between monthly and yearly billing cycles, ensuring a customizable and user-centric pricing presentation.
The component integrates shadcn UI elements to deliver a visually cohesive and intuitive design. The Pricing34 component emphasizes key details by highlighting the active billing cycle in vivid contrast, while each plan card succinctly communicates essential information such as plan name, price, description, and included features. The component's flexible layout supports both standard and custom pricing options, making it a versatile choice for a range of use cases.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
button @shadcn | Registry |
card @shadcn | Registry |
separator @shadcn | Registry |
toggle-group @shadcn | Registry |