Docs·Accordion Reveal

Accordion Reveal

A vertical list of rows that expand on hover to reveal full-bleed imagery, labels, and descriptions.

Installation

$pnpm dlx shadcn@latest add @spiderui/accordion-reveal

Usage

API Reference

PropTypeDefault
itemsRow data with label, sublabel, image, optional alt text, and description.
AccordionRevealItem[]5 film & TV picks
collapsedHeightRow height in pixels when collapsed.
number68
expandedHeightRow height in pixels when hovered.
number320
classNameAdditional classes on the root wrapper.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
Spider-Verse multiverse artwork
01Spider-Verse— Anyone can wear the mask — leap of faith included
Animation
The Matrix digital rain
02The Matrix— There is no spoon, only the code beneath
Sci-Fi
Twin Peaks misty forest
03Twin Peaks— Damn fine coffee, damn strange woods
TV
Blade Runner neon cityscape
04Blade Runner— Tears in rain on a skyline that never sleeps
Sci-Fi
The Godfather dramatic still
05The Godfather— Leave the gun. Take the cannoli.
Crime
import { AccordionReveal } from "@/components/ui/accordion-reveal"
export default function Page() {
  return (
    <div className="max-w-xl text-foreground">
      <AccordionReveal />
    </div>
  )
}