Chapter Features
Feature chapters that play themselves: the active one expands while its rail fills, and a stage wipes to a live scene for it.
Overview
Each feature is a chapter. The active one opens to its full description while a thin rail fills in time with the autoplay clock; when the rail is full the next chapter begins. Hover, keyboard focus or scrolling the section out of view pauses it, and any chapter can be opened directly.
Beside the list, a stage wipes upward to that chapter’s scene. The built-in scenes are small product moments rather than icons: a search that types itself and returns results, permissions switching on one by one, a chart whose bars grow into place, and a deploy log that ticks through its steps to Ready.
Pass a visual per chapter to show your own screenshots or UI. Light and dark (.dark), one CSS file, no animation library; under prefers-reduced-motion it stops autoplaying and shows each scene in its finished state.
When to use
- Marketing and product pages that need a complete, responsive band of content.
When not to use
- Inside dense app screens, where a smaller component fits better.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/chapter-features.jsonnpx shadcn@latest add https://sundaeui.dev/r/chapter-features.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/chapter-features.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/chapter-features.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy chapter-features.tsx and chapter-features.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ChapterFeatures } from '@/components/sundae/chapter-features'
<ChapterFeatures
title="Everything in its place, the moment you need it."
chapters={[
{ title: 'Find anything in a keystroke', body: 'One search across…', visual: <img src="/search.png" alt="" /> },
{ title: 'Access that matches the org chart', body: 'Roles with plain-language permissions.' },
]}
/>Props
| Prop | Type | Default |
|---|---|---|
title*Section heading. | string | — |
chapters*Three to five chapters read best. | { title: string; body: string; visual?: ReactNode }[] | — |
eyebrowLabel above the heading. | string | 'Features' |
introSupporting paragraph. | string | — |
intervalMilliseconds each chapter plays. | number | 5200 |
Accessibility
- Chapters are buttons with aria-expanded and aria-controls pointing at their scene.
- Autoplay pauses on hover, on keyboard focus and when the section is off screen.
- Inactive scenes are aria-hidden; reduced motion turns autoplay off.
Customization
- Colours are --cf-* custom properties on .sd-cf, with dark values under .dark.
- Change the stage aspect ratio in .sd-cf__stage (default 5 / 4).
FAQ
- Is Chapter Features free?
- Chapter Features is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Chapter Features?
- Run npx shadcn@latest add https://sundaeui.dev/r/chapter-features.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Chapter Features support keyboard and screen readers?
- Chapters are buttons with aria-expanded and aria-controls pointing at their scene. Autoplay pauses on hover, on keyboard focus and when the section is off screen.
- Does Chapter Features respect reduced motion?
- Inactive scenes are aria-hidden; reduced motion turns autoplay off.
More like this
All sections →- Pro
Bento Features
Sections · Understated - Pro
Aperture Hero
Sections · Refined - Pro
Odometer Pricing
Sections · Refined - Pro
Ledger Pricing
Sections · Editorial - Pro
Testimonial Columns
Sections · Refined - Pro
Metric Strip
Sections · Refined