Skip to content
Find a componentBrowse components

Rolodex Gallery

A tactile card file cycles through your images in a layered 3D stack.

LIVE PREVIEWInteract with the component
Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

jsx
import RolodexGallery from "./RolodexGallery";


export default function Example() {
  return (
    <RolodexGallery
      items={[
        {
          "id": "fold",
          "title": "Fold study",
          "alt": "Folded blue sculpture on warm stone",
          "image": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%221000%22%20viewBox%3D%220%200%20800%201000%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22bg%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23e3d8c5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23a6a09d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22blue%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23bdd0dc%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%236e879f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23283a50%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22cream%22%20x2%3D%221%22%20y2%3D%22.8%22%3E%3Cstop%20stop-color%3D%22%23f8e9d0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23d4b38e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23896854%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22shade%22%3E%3Cstop%20stop-color%3D%22%23272026%22%20stop-opacity%3D%22.4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23272026%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23bg)%22%20d%3D%22M0%200h800v1000H0z%22%2F%3E%3Cellipse%20cx%3D%22423%22%20cy%3D%22792%22%20rx%3D%22280%22%20ry%3D%2285%22%20fill%3D%22url(%23shade)%22%2F%3E%3Cpath%20fill%3D%22url(%23blue)%22%20d%3D%22m230%20290%20190-70%20180%20150-50%20350-160%2095-170-190Z%22%2F%3E%3Cpath%20fill%3D%22%23bdc9d0%22%20d%3D%22m230%20290%20190-70-30%20340-170%2065Z%22%2F%3E%3Cpath%20fill%3D%22%23718ca1%22%20d%3D%22m420%20220%20180%20150-175%20170-35%2020Z%22%2F%3E%3Cpath%20fill%3D%22%23344b61%22%20d%3D%22m425%20540%20175-170-50%20350-160%2095Z%22%2F%3E%3Cpath%20fill%3D%22%239bafbd%22%20d%3D%22m220%20625%20170-65v255Z%22%2F%3E%3C%2Fsvg%3E"
        },
        {
          "id": "ribs",
          "title": "Rhythm in clay",
          "alt": "A ribbed ceramic form in soft amber light",
          "image": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%221000%22%20viewBox%3D%220%200%20800%201000%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22bg%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23e3d8c5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23a6a09d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22blue%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23bdd0dc%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%236e879f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23283a50%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22cream%22%20x2%3D%221%22%20y2%3D%22.8%22%3E%3Cstop%20stop-color%3D%22%23f8e9d0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23d4b38e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23896854%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22shade%22%3E%3Cstop%20stop-color%3D%22%23272026%22%20stop-opacity%3D%22.4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23272026%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23221b19%22%20d%3D%22M0%200h800v1000H0z%22%2F%3E%3Cellipse%20cx%3D%22400%22%20cy%3D%22820%22%20rx%3D%22260%22%20ry%3D%2265%22%20fill%3D%22url(%23shade)%22%2F%3E%3Crect%20x%3D%22170%22%20y%3D%22285%22%20width%3D%2230%22%20height%3D%22530%22%20rx%3D%2215%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22187%22%20y%3D%22279.78%22%20width%3D%2235.57%22%20height%3D%22530%22%20rx%3D%2217.785%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22204%22%20y%3D%22274.62%22%20width%3D%2241.07%22%20height%3D%22530%22%20rx%3D%2220.535%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22221%22%20y%3D%22269.61%22%20width%3D%2246.42%22%20height%3D%22530%22%20rx%3D%2223.21%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22238%22%20y%3D%22264.8%22%20width%3D%2251.54%22%20height%3D%22530%22%20rx%3D%2225.77%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22255%22%20y%3D%22260.27%22%20width%3D%2256.38%22%20height%3D%22530%22%20rx%3D%2228.19%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22272%22%20y%3D%22256.07%22%20width%3D%2260.85%22%20height%3D%22530%22%20rx%3D%2230.425%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22289%22%20y%3D%22252.27%22%20width%3D%2264.91%22%20height%3D%22530%22%20rx%3D%2232.455%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22306%22%20y%3D%22248.9%22%20width%3D%2268.5%22%20height%3D%22530%22%20rx%3D%2234.25%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22323%22%20y%3D%22246.03%22%20width%3D%2271.57%22%20height%3D%22530%22%20rx%3D%2235.785%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22340%22%20y%3D%22243.68%22%20width%3D%2274.07%22%20height%3D%22530%22%20rx%3D%2237.035%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22357%22%20y%3D%22241.89%22%20width%3D%2275.98%22%20height%3D%22530%22%20rx%3D%2237.99%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22374%22%20y%3D%22240.68%22%20width%3D%2277.27%22%20height%3D%22530%22%20rx%3D%2238.635%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22391%22%20y%3D%22240.08%22%20width%3D%2277.92%22%20height%3D%22530%22%20rx%3D%2238.96%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22408%22%20y%3D%22240.08%22%20width%3D%2277.92%22%20height%3D%22530%22%20rx%3D%2238.96%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22425%22%20y%3D%22240.68%22%20width%3D%2277.27%22%20height%3D%22530%22%20rx%3D%2238.635%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22442%22%20y%3D%22241.89%22%20width%3D%2275.98%22%20height%3D%22530%22%20rx%3D%2237.99%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22459%22%20y%3D%22243.68%22%20width%3D%2274.07%22%20height%3D%22530%22%20rx%3D%2237.035%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22476%22%20y%3D%22246.03%22%20width%3D%2271.57%22%20height%3D%22530%22%20rx%3D%2235.785%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22493%22%20y%3D%22248.9%22%20width%3D%2268.5%22%20height%3D%22530%22%20rx%3D%2234.25%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22510%22%20y%3D%22252.27%22%20width%3D%2264.91%22%20height%3D%22530%22%20rx%3D%2232.455%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22527%22%20y%3D%22256.07%22%20width%3D%2260.85%22%20height%3D%22530%22%20rx%3D%2230.425%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22544%22%20y%3D%22260.27%22%20width%3D%2256.38%22%20height%3D%22530%22%20rx%3D%2228.19%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22561%22%20y%3D%22264.8%22%20width%3D%2251.54%22%20height%3D%22530%22%20rx%3D%2225.77%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22578%22%20y%3D%22269.61%22%20width%3D%2246.42%22%20height%3D%22530%22%20rx%3D%2223.21%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22595%22%20y%3D%22274.62%22%20width%3D%2241.07%22%20height%3D%22530%22%20rx%3D%2220.535%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22612%22%20y%3D%22279.78%22%20width%3D%2235.57%22%20height%3D%22530%22%20rx%3D%2217.785%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22629%22%20y%3D%22285%22%20width%3D%2230%22%20height%3D%22530%22%20rx%3D%2215%22%20fill%3D%22url(%23cream)%22%2F%3E%3C%2Fsvg%3E"
        },
        {
          "id": "portal",
          "title": "Quiet geometry",
          "alt": "A circular pale sun above terracotta architectural steps",
          "image": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%221000%22%20viewBox%3D%220%200%20800%201000%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22bg%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23e3d8c5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23a6a09d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22blue%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23bdd0dc%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%236e879f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23283a50%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22cream%22%20x2%3D%221%22%20y2%3D%22.8%22%3E%3Cstop%20stop-color%3D%22%23f8e9d0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23d4b38e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23896854%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22shade%22%3E%3Cstop%20stop-color%3D%22%23272026%22%20stop-opacity%3D%22.4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23272026%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23c8bfb0%22%20d%3D%22M0%200h800v1000H0z%22%2F%3E%3Ccircle%20cx%3D%22515%22%20cy%3D%22260%22%20r%3D%22100%22%20fill%3D%22%23eee2be%22%2F%3E%3Cpath%20d%3D%22M0%20640h200V520h200V400h200V280h200v720H0Z%22%20fill%3D%22%23a26450%22%2F%3E%3Cpath%20d%3D%22M0%20740h200V620h200V500h200V380h200v620H0Z%22%20fill%3D%22%23c58d72%22%2F%3E%3Cpath%20d%3D%22M0%20850h200V730h200V610h200V490h200v510H0Z%22%20fill%3D%22%23dfb397%22%2F%3E%3C%2Fsvg%3E"
        },
        {
          "id": "balance",
          "title": "Weight & balance",
          "alt": "Two rounded stone forms balanced in a blue studio",
          "image": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%221000%22%20viewBox%3D%220%200%20800%201000%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22bg%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23e3d8c5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23a6a09d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22blue%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23bdd0dc%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%236e879f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23283a50%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22cream%22%20x2%3D%221%22%20y2%3D%22.8%22%3E%3Cstop%20stop-color%3D%22%23f8e9d0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23d4b38e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23896854%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22shade%22%3E%3Cstop%20stop-color%3D%22%23272026%22%20stop-opacity%3D%22.4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23272026%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%237c909c%22%20d%3D%22M0%200h800v1000H0z%22%2F%3E%3Cellipse%20cx%3D%22420%22%20cy%3D%22820%22%20rx%3D%22260%22%20ry%3D%2280%22%20fill%3D%22url(%23shade)%22%2F%3E%3Crect%20x%3D%22235%22%20y%3D%22510%22%20width%3D%22330%22%20height%3D%22290%22%20rx%3D%22145%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22185%22%20y%3D%22260%22%20width%3D%22440%22%20height%3D%22250%22%20rx%3D%22125%22%20transform%3D%22rotate(-18%20405%20385)%22%20fill%3D%22url(%23blue)%22%2F%3E%3C%2Fsvg%3E"
        }
      ]}
      defaultIndex={0}
      width={340}
      height={300}
      color={"#d9cbb6"}
      inkColor={"#30271f"}
      duration={650}
      label={"Sculpture studies"}
      previousLabel={"Previous image"}
      nextLabel={"Next image"}
    />
  );
}

Using Rolodex Gallery

Supply image cards with meaningful titles and alternative text through items. width and height determine the deck's footprint.

Pair activeIndex with onIndexChange for external selection. An empty collection renders nothing, while a single card disables the previous and next controls.

Props

NameTypeRequiredDefaultDescription
itemsArray<{ id?, image, alt?, title? }>No[]Your image cards. An empty collection renders nothing.
activeIndexnumberNoundefinedOptional controlled selected index, wrapped to the collection length.
defaultIndexnumberNo0Initial selected index when uncontrolled.
onIndexChangefunctionNoundefinedCalled with the selected index and item.
widthnumber | stringNo360Gallery width, capped to the parent width.
heightnumberNo320Deck height in pixels, at least 160.
colorstringNo"#d9cbb6"Card paper and navigation colour.
inkColorstringNo"#30271f"Card caption colour.
durationnumberNo650Card transition duration in milliseconds.
labelstringNo"Image card file"Accessible gallery name.
previousLabelstringNo"Previous image"Accessible previous button label.
nextLabelstringNo"Next image"Accessible next button label.
classNamestringNo""Additional classes for the root element.
styleCSSPropertiesNoundefinedInline styles for caller-defined size, typography, and appearance.

Related components

Parallax Scene

Images

Transparent image layers separate in depth as the pointer crosses the scene.

Slice Parallax

Images

An image separates into polished vertical slivers that shift with the pointer.

Lightbox Gallery

Images

An editorial image grid opens into a focused, keyboard-accessible viewing room.

Category: Images
ImagesReactAnimation