Hero 113 - Price calculator sliderPro
Split hero with an interactive seat slider and billing toggle that recalculates the monthly price and savings live.
About Hero 113
Split hero with an interactive seat slider and billing toggle that recalculates the monthly price and savings live.
Hero 113 is a pro hero block for React, built on shadcn/ui and Tailwind CSS. It ships as 119 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- pricing
- slider
- calculator
- interactive
- split
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/hero-113Dependencies installed automatically: lucide-react.
Uses: button, reveal, utils.
Usage
import Hero113 from "@/components/blocks/hero-113"
export default function Page() {
return <Hero113 />
}