Components
Loading preview...
A theme-adaptive pricing component that maintains stunning visual appeal in both light and dark modes. Features glassmorphism cards, gradient elements, and proper contrast ratios for accessibility across all themes.
@vaib215
npx shadcn@latest add https://21st.dev/r/vaib215/adaptive-pricing-sectionimport React from 'react'
import PricingComponent from '@/components/ui/adaptive-pricing-section'
const Demo = () => {
const pricingTiers = [
{
name: "Free",
subtitle: "COMMUNITY",
description: "Perfect for getting started with essential features.",
features: [
{ text: "Up to 10 user messages", included: true, hasInfo: true },
{ text: "Context Engine", included: true },
{ text: "MCP & Native Tools", included: false },
{ text: "Unlimited Next Edits & Completions", included: true },
{ text: "Community support", included: true }
],
buttonText: "Install now"
},
{
name: "$50",
subtitle: "DEVELOPER",
price: "$50",
period: "/month",
description: "For individuals or small teams that want to ship to production, fast.",
badge: {
text: "7 DAY FREE TRIAL"
},
features: [
{ text: "Everything in community", included: true },
{ text: "Up to 600 user messages", included: true, hasInfo: true },
{ text: "Team management, up to 100 users", included: true },
{ text: "SOC 2 type II", included: true }
],
buttonText: "Install now",
highlighted: true,
footerText: "Need more messages?",
footerLink: "See plans below."
},
{
name: "Enterprise",
subtitle: "ENTERPRISE",
description: "For enterprise teams with high volume, security, or support needs.",
features: [
{ text: "Custom user pricing", included: true },
{ text: "Bespoke user message limit", included: true, hasInfo: true },
{ text: "Slack integration", included: true },
{ text: "Volume based annual discounts", included: true },
{ text: "SSO, OIDC, & SCIM support", included: true },
{ text: "SOC 2 & Security Reports", included: true }
],
buttonText: "Contact sales"
}
]
return (
<div className="w-full">
<PricingComponent
tiers={pricingTiers}
/>
</div>
)
}
export default Demo