Feature 18 - Auto-advancing accordion with imagePro
Image on the left, accordion on the right that advances on a timer with a progress bar under the open item; the image cross-fades to match.
About Feature 18
Image on the left, accordion on the right that advances on a timer with a progress bar under the open item; the image cross-fades to match.
Feature 18 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 143 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.
- accordion
- image
- autoplay
- progress
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add feature-18Dependencies installed automatically: motion.
Uses: accordion, reveal, use-reduced-motion, utils.
Usage
import Feature18 from "@/components/blocks/feature-18"
export default function Page() {
return <Feature18 />
}