Feature 90 - Segmented use-case switcherPro

A pill segmented control swaps the whole section between use cases: headline, checklist, CTA and image all change together.

About Feature 90

A pill segmented control swaps the whole section between use cases: headline, checklist, CTA and image all change together.

Feature 90 is a feature block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 96 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.

  • segmented
  • use-cases
  • switcher
  • image

Installation

  1. Set up your project with npx chocolateui init and npx chocolateui login (see the installation guide).
  2. Run the Chocolate UI CLI:
npx chocolateui add feature-90

Dependencies installed automatically: lucide-react, motion.

Uses: button, reveal, use-reduced-motion, utils.

Usage

import Feature90 from "@/components/blocks/feature-90"

export default function Page() {
  return <Feature90 />
}

FAQ