Spine Accordion

Galleries 68

About

A gallery panel that shows projects as thin vertical spines with sideways titles, opening one into a full framed image on hover, tap, or keyboard focus while the others collapse back.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Spine Accordion to your project and fits it to your theme.

Code

How Spine Accordion is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { SpineAccordion } from "@/components/ui/spine-accordion";

export default function SpineAccordionDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center p-8">
      <SpineAccordion
        className="max-w-4xl"
        defaultIndex={2}
        items={[
          {
            title: "Northern Lights",
            image: "https://cdn.21st.dev/assets/mirror/87/870a7dad1337e336ce3e626636f17d0ccda58c3ed444002a07696259a7188bdb.jpg",
            meta: "2021",
          },
          {
            title: "Desert Bloom",
            image: "https://cdn.21st.dev/assets/mirror/a6/a6baeb8c089233379e22b1393477be200b3a3b7a0745e64cc825c339c8463e0b.jpg",
            meta: "2022",
          },
          {
            title: "Coastal Drift",
            image: "https://cdn.21st.dev/assets/mirror/48/48288a1b78fecf95a5b8419b6c6e2187b289874ff8286e6681400863f4255c5b.jpg",
            meta: "2023",
          },
          {
            title: "Urban Pulse",
            image: "https://cdn.21st.dev/assets/mirror/70/707ab186017a71e70a4cc005b13fe2848ab7a677bd8a3d6ccb56d29f81571d0f.jpg",
            meta: "2024",
          },
        ]}
      />
    </div>
  );
}