# Ring Binder Tabs with Coloured Index Dividers That Turn over Chrome Rings to Open Each Section > Vertical tabs drawn as an open ring binder: press a coloured index tab and the dividers turn over chrome rings to that section. Free React and HTML code. A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/ring-binder-tabs-with-coloured-index-dividers-that-turn-over-chrome-rings-to-open-each-section). - Page, with a live preview: https://shadcn.exchange/r/weinc/ring-binder-tabs-with-coloured-index-dividers-that-turn-over-chrome-rings-to-open-each-section - Screenshot: https://shadcn.exchange/shot/weinc/ring-binder-tabs-with-coloured-index-dividers-that-turn-over-chrome-rings-to-open-each-section/light.png - Registry item: https://we.inc/r/ring-binder-tabs-with-coloured-index-dividers-that-turn-over-chrome-rings-to-open-each-section.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/ring-binder-tabs-with-coloured-index-dividers-that-turn-over-chrome-rings-to-open-each-section.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `framer-motion` ## Files ### `components/we-inc/ring-binder-tabs-with-coloured-index-dividers-that-turn-over-chrome-rings-to-open-each-section.tsx` ```tsx import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion"; /** One divider per section. `tab` is the word on the coloured tab; the photograph faces the text across the rings. */ const kitchen = { name: "Marlowe Kitchen", book: "The year in four menus", hint: "Press a coloured tab to turn to it" }; const sections = [ { tab: "Spring", colour: "#7fae4c", deep: "#3c641f", title: "First of the green", photo: "https://images.pexels.com/photos/6608620/pexels-photo-6608620.jpeg?auto=compress&cs=tinysrgb&w=900", tone: "#c9c7b4", alt: "A white bowl of green peas and asparagus tips with an egg yolk in the middle, seen from above", caption: "Peas, asparagus, cured yolk", body: "The menu turns over in the week the first asparagus arrives from the farm at Hollin Cross. Everything is cooked for seconds, dressed with good oil and left alone.", dishes: [["Peas, asparagus, cured yolk", "11"], ["Jersey royals, wild garlic butter", "8"], ["Rhubarb, buttermilk, ginger crumb", "9"]], }, { tab: "Summer", colour: "#f0b429", deep: "#8a5a00", title: "Tomatoes all day", photo: "https://images.pexels.com/photos/6461772/pexels-photo-6461772.jpeg?auto=compress&cs=tinysrgb&w=900", tone: "#eeb7c4", alt: "Yellow tomatoes and peppers cut open on a pink plate beside a small pan of pink salt", caption: "Yellow tomatoes, sea salt", body: "By July the kitchen barely needs the stove. Tomatoes come in warm from the tunnel, get salt and twenty minutes on the counter, and go out before they have ever seen a fridge.", dishes: [["Yellow tomatoes, sea salt, basil oil", "10"], ["Grilled courgette, ricotta, mint", "12"], ["Peaches, brown sugar, cold cream", "9"]], }, { tab: "Autumn", colour: "#dd6a2c", deep: "#8f3a0e", title: "Slow oven season", photo: "https://images.pexels.com/photos/9443902/pexels-photo-9443902.jpeg?auto=compress&cs=tinysrgb&w=900", tone: "#2f5d5c", alt: "Scored wedges of roasted pumpkin on a dark teal plate with a sprig of dill", caption: "Roast pumpkin, brown butter", body: "Once the squash is cut the ovens stay on low from breakfast. Roots, brassicas and the last of the orchard fruit go in whole and come out soft enough to eat with a spoon.", dishes: [["Roast pumpkin, brown butter, dill", "11"], ["Hispi cabbage, anchovy, crumbs", "12"], ["Baked apple, oat cream", "8"]], }, { tab: "Winter", colour: "#4a78c2", deep: "#1f3f7a", title: "Out of the larder", photo: "https://images.pexels.com/photos/19185775/pexels-photo-19185775.jpeg?auto=compress&cs=tinysrgb&w=900", tone: "#1a1614", alt: "A black bowl of bright red tomato soup on a black table, seen from above", caption: "Bottled tomato soup", body: "January cooking is whatever we put away in September. Bottled tomatoes, dried beans and a shelf of pickles carry the menu until the ground wakes up again.", dishes: [["Bottled tomato soup, sour cream", "8"], ["White beans, kale, parmesan rind", "12"], ["Marmalade sponge, custard", "9"]], }, ]; // Two sets of measurements in pixels: one for desks, one for phones. const WIDE = { pageW: 350, pageH: 470, gut: 44, tabW: 32, rim: 14, padY: 18, pad: 30, title: 38, text: 15, lead: 24, small: 12.5, tabText: 11.5, hit: 0 }; const SLIM = { pageW: 146, pageH: 374, gut: 20, tabW: 17, rim: 4, padY: 10, pad: 11, title: 19, text: 11.5, lead: 16.5, small: 9.8, tabText: 8.5, hit: 24 }; type Dims = typeof WIDE; const RINGS = [0.14, 0.5, 0.86]; const TILT = 21; // how far the binder leans away from the camera, in degrees const svgUrl = (body: string, w: number, h: number) => `url("data:image/svg+xml;utf8,${encodeURIComponent(`${body}`)}")`; const PAPER = svgUrl(``, 240, 240); const CLOTH = svgUrl(``, 200, 200); const CHROME = "linear-gradient(180deg, #5c6166 0%, #f7f9fa 16%, #c3c9ce 30%, #70777d 52%, #2d3135 66%, #9ba3a9 82%, #e4e8eb 92%, #4b5055 100%)"; const PAGE = "#f7f2e6"; /** The printed side of a divider: the words for its section. */ function TextPage({ i, d, uid, active }: { i: number; d: Dims; uid: string; active: boolean }) { const s = sections[i]; return (
{kitchen.name}

{s.title}

); } /** The other side: a full plate photograph of the section that follows. */ function PhotoPage({ i, d, active }: { i: number; d: Dims; active: boolean }) { const s = sections[i]; const m = d.hit ? 8 : 18; return (
{s.alt}
{s.caption} {d.hit ? null : ( )}
); } function Sheet({ d, side, children, edge }: { d: Dims; side: "right" | "left"; children: ReactNode; edge?: boolean }) { const inner = side === "right" ? "left" : "right"; return (
{children} {RINGS.map((r) => (
); } function Tab({ i, d, side, active, focused }: { i: number; d: Dims; side: "right" | "left"; active: boolean; focused: boolean }) { const s = sections[i]; const h = d.pageH / sections.length; const out = side === "right"; return ( ); } function Leaf({ i, d, turned, wait, reduce, active, next, focused, uid, onPick, onKey, onFocus, setRef }: { i: number; d: Dims; turned: boolean; wait: number; reduce: boolean; active: boolean; next: boolean; focused: boolean; uid: string; onPick: () => void; onKey: (e: KeyboardEvent) => void; onFocus: (e: { on: boolean; el: HTMLElement }) => void; setRef: (el: HTMLButtonElement | null) => void }) { const n = sections.length; const angle = useMotionValue(turned ? -180 : 0); const z = useTransform(angle, [0, -90, -180], [(n - i) * 0.7, 30, (i + 1) * 0.7]); const frontShade = useTransform(angle, [0, -90], [0, 0.42]); const backShade = useTransform(angle, [-90, -180], [0.5, 0]); const was = useRef(turned); useEffect(() => { if (was.current === turned || reduce) { was.current = turned; angle.set(turned ? -180 : 0); return; } was.current = turned; const run = animate(angle, turned ? -180 : 0, { duration: 0.95, delay: wait, ease: [0.42, 0, 0.18, 1] }); return () => run.stop(); }, [turned, reduce, wait, angle]); const w = d.gut / 2 + d.pageW + d.tabW; const h = d.pageH / n; return (
{i + 1 < n ? : null}
{/* the control rides on the divider itself, so it stays under your finger while the page turns */} ); } export default function RingBinderTabs() { const reduce = !!useReducedMotion(); const uid = useId(); const wrapRef = useRef(null); const tabs = useRef<(HTMLButtonElement | null)[]>([]); const [slim, setSlim] = useState(false); const [scale, setScale] = useState(1); const [sel, setSel] = useState({ now: 1, was: 1 }); const [focus, setFocus] = useState(-1); const idle = useRef({ touched: false, paused: false }); const d = slim ? SLIM : WIDE; const n = sections.length; const half = d.gut / 2 + d.pageW + d.tabW + d.rim; const W = half * 2; const H = d.pageH + d.padY * 2; useEffect(() => { const wrap = wrapRef.current; if (!wrap) return; const measure = () => { const w = wrap.clientWidth; const narrow = w < 900; const m = narrow ? SLIM : WIDE; setSlim(narrow); setScale(Math.min(narrow ? 1.5 : 1, (w - (narrow ? 24 : 10)) / ((m.gut / 2 + m.pageW + m.tabW + m.rim) * 2))); }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); // until someone touches it, the binder leafs through the year useEffect(() => { if (reduce) return; const s = idle.current; const t = window.setInterval(() => { if (s.touched || s.paused || document.hidden) return; setSel((v) => ({ now: (v.now + 1) % n, was: v.now })); }, 3400); return () => window.clearInterval(t); }, [reduce, n]); const pick = (i: number, focusIt = false) => { idle.current.touched = true; setSel((v) => (v.now === i ? v : { now: i, was: v.now })); if (focusIt) tabs.current[i]?.focus(); }; const onKey = (i: number) => (e: KeyboardEvent) => { const to = e.key === "ArrowDown" || e.key === "ArrowRight" ? (i + 1) % n : e.key === "ArrowUp" || e.key === "ArrowLeft" ? (i + n - 1) % n : e.key === "Home" ? 0 : e.key === "End" ? n - 1 : -1; if (to < 0) return; e.preventDefault(); pick(to, true); }; const top = d.hit ? 26 : 62; return (
); } ```