Scroll Accordion Showcase

A high-impact, scroll-driven interactive section built with full dark/light mode responsiveness, instantaneous localStorage theme coloring, and flexible layout options. As users scroll through a sequence of numbered accordion cards, an IntersectionObserver expands the active narrative while cross-fading a sticky showcase mockup on the right.

Scroll the preview and each row expands as it reaches the reading line, driving the sticky image card beside it. displayMode decides which halves of that pairing are rendered.

Scroll accordion showcase

One row per item; the sticky card follows whichever row is active.

Passitems: as { id, stepNumber, title, description, image }[] — tags is optional and renders as pill badges when the row expands.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Scroll Accordion Showcase

npx shadcn@latest add @algorize-ui/scroll-accordion-showcase

components/custom/blocks/ScrollAccordionShowcaseBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Scroll Accordion Showcase needs only the cn helper and lucide-react, which the installation guide already put in place.

Accent color

The accent is resolved at runtime, so it adopts your site's primary color with no configuration. The component reads a hex from localStorage (any key starting with localStorageKey), then the --primary-color / --primary / --theme-color CSS variables, and only falls back to defaultAccentColor if neither is set.

Examples

Text only

SetdisplayMode"text-only": to drop the sticky image column and run the accordion full width.

Image only

SetdisplayMode"image-only": to keep the scroll-driven visual and replace the copy with a horizontal step selector.

Starting row

defaultIndex{0}: is the zero-based row expanded before the reader scrolls.
scrollerRef: points the internal IntersectionObserver at a custom scroll container instead of the window.

Props Reference

Component / Interface	Prop	Type	Default	Description
`ScrollAccordionShowcase`	`items`	`AccordionShowcaseItem[]`	Required	An array of data objects defining the numbered step badges, titles, narrative descriptions, interactive tags, and paired visual mockup images.
`ScrollAccordionShowcase`	`displayMode`	`"both" \| "text-only" \| "image-only"`	`"both"`	Controls the rendered layout structure. `"both"` renders the two-column grid with JS-driven sticky tracking; `"text-only"` renders isolated accordion cards; `"image-only"` renders a horizontal step selector bar above the visual showcase card.
`ScrollAccordionShowcase`	`defaultIndex`	`number`	`0`	The initial zero-based index of the accordion card that is expanded and highlighted when the component first mounts.
`ScrollAccordionShowcase`	`localStorageKey`	`string`	`"primaryColor"`	The primary storage key string monitored by the instant multi-layer detection proxy to synchronize theme colors across tabs, `Storage.prototype` mutations, and CSS root variables.
`ScrollAccordionShowcase`	`defaultAccentColor`	`string`	`"var(--primary)"`	The fallback hex color string applied automatically if no valid hex or rgb color value is detected in `localStorage` or CSS root variables.
`ScrollAccordionShowcase`	`scrollerRef`	`React.RefObject<HTMLElement \| null>`	`undefined`	An optional React ref target passed directly to the internal `IntersectionObserver` to track scroll progress within a custom scrollable container instead of the browser window viewport.
`ScrollAccordionShowcase`	`className`	`string`	`undefined`	Custom Tailwind CSS classes to apply to the outermost section wrapper container.
`AccordionShowcaseItem`	`id`	`string`	Required	A unique string identifier required for safe React list rendering and for swapping the showcase image when the active step changes.
`AccordionShowcaseItem`	`stepNumber`	`string`	Required	A formatted numerical string (e.g., `"01"`, `"02"`) rendered inside the top badge on the accordion card and horizontal selector bar.
`AccordionShowcaseItem`	`title`	`string`	Required	The primary headline text displayed prominently on the accordion card, horizontal selector, and sticky visual showcase badge.
`AccordionShowcaseItem`	`description`	`string`	Required	The detailed paragraph text explaining the specific step or service, which smoothly expands when the card becomes active.
`AccordionShowcaseItem`	`tags`	`string[]`	`undefined`	An optional array of keyword strings rendered as uppercase pill badges with colored checkmark icons beneath the description when the card expands.
`AccordionShowcaseItem`	`image`	`string`	Required	The image URL or file path displayed inside the sticky visual mockup card, which smoothly cross-fades when the active step changes.
`AccordionShowcaseItem`	`badgeText`	`string`	`"SELECTED SERVICE"`	An optional custom uppercase label rendered inside the floating glassmorphic badge at the bottom-left of the sticky visual card.