The PricingSection arranges premium package cards inside dark-glass surfaces. It has been completely rebuilt to support modular configurations, customizable accent colors, and multiple interactive variants like dynamic mouse spotlights and focus blurring.
Live Preview
Flexible Pricing for Everyone
All components are open-source. Upgrade to access premium templates, custom WebGL/3D canvases, and custom shader packs.
Perfect for learning and personal hobby websites.
- Access to 25+ core motion components
- Vanilla CSS & Tailwind integration
- Framer Motion spring setups
- Community discord support
- Lifetime updates
The ultimate toolbox for creative developers and agency freelancers.
- ALL premium motion components
- Custom GLSL shaders & 3D canvases
- All 5 pre-built templates (worth $150)
- Unlimited commercial websites
- Priority email assistance
Installation
npx kinetic-ui-cli@latest add pricing-sectionProps
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'grid' | 'spotlight' | 'focus' | 'grid' | Controls the hover interactions across the cards. |
tiers | PricingTier[] | defaultTiers | Array of pricing data objects to map into cards. |
color | string | '#6366f1' | The primary accent color for the highlighted card, buttons, and radial glows. |
speed | number | 1 | Controls the animation duration multiplier. |
scale | number | 1 | Controls how much the cards scale up on hover. |
className | string | — | Optional Tailwind classes applied to the main wrapper section. |
Usage Examples
Spotlight Hover Variant
A dynamic variant where a spotlight follows your cursor across the cards.
import { PricingCards } from '@/components/creative/pricing-cards';
export default function Example() {
return (
<PricingCards
variant="spotlight"
color="#10b981" // Custom emerald accent
/>
);
}
Focus Mode Variant
When you hover over a specific card, the others will dim out and blur to emphasize the focused package.
import { PricingCards } from '@/components/creative/pricing-cards';
export default function Example() {
return (
<PricingCards
variant="focus"
/>
);
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { PricingSection } from "@/components/creative/pricing-cards";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { PricingSection } from "@/components/creative/pricing-cards";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<PricingSection
/>
</div>
);
}