# Oak Card Index Box FAQ with Tabbed Question Cards That Rise out and Stand Against the Open Lid > FAQ built as a card index box: press a tab and its ruled card rises out of the row and stands against the open lid. Free React and Tailwind code, or HTML. 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/oak-card-index-box-faq-with-tabbed-question-cards-that-rise-out-and-stand-against-the-open-lid). - Page, with a live preview: https://shadcn.exchange/r/weinc/oak-card-index-box-faq-with-tabbed-question-cards-that-rise-out-and-stand-against-the-open-lid - Screenshot: https://shadcn.exchange/shot/weinc/oak-card-index-box-faq-with-tabbed-question-cards-that-rise-out-and-stand-against-the-open-lid/light.png - Registry item: https://we.inc/r/oak-card-index-box-faq-with-tabbed-question-cards-that-rise-out-and-stand-against-the-open-lid.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/oak-card-index-box-faq-with-tabbed-question-cards-that-rise-out-and-stand-against-the-open-lid.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/oak-card-index-box-faq-with-tabbed-question-cards-that-rise-out-and-stand-against-the-open-lid.tsx` ```tsx import { useEffect, useId, useRef, useState } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion"; /** The name on the brass holder and one card per question. `tab` is the short word cut into the card's tab. */ const library = { name: "Halewood Tool Library", drawer: "Questions", note: "Ask at the counter" }; const cards = [ { tab: "Joining", q: "How do I become a member?", a: "Call in on any open day with something that shows your address. We take your details, hand you a card and you can borrow that same afternoon." }, { tab: "Hours", q: "When is the library open?", a: "Tuesday and Thursday from four until eight, and Saturday from nine until one. The shutter on Mill Lane is up whenever we are in." }, { tab: "Loans", q: "How long can I keep a tool?", a: "A week for most things. Ladders, the tile cutter and the floor sander go out for three days because there is always a queue for them." }, { tab: "Late", q: "What if I bring something back late?", a: "Tell us before the due date and we will extend it if nobody is waiting. After that it is fifty pence a day, which goes into the blade fund." }, { tab: "Repairs", q: "What happens if a tool breaks?", a: "Bring it back and say what happened. Wear is ours to fix. We only ask for help with the cost when something has plainly been misused." }, { tab: "Demos", q: "Can someone show me how to use it?", a: "Yes. A volunteer will run through any tool at the counter, and the first Saturday of each month is a hands-on morning with the kettle on." }, ]; // Two sets of measurements in pixels: one for desks, one for phones. Everything is drawn from these. const WIDE = { boxW: 560, wall: 16, boxH: 168, cardW: 468, cardH: 292, tabW: 86, tabH: 28, step: 12, lidH: 340, pad: 22, head: 62, line: 24, text: 14, ask: 15, tabText: 10.5 }; const SLIM = { boxW: 336, wall: 11, boxH: 122, cardW: 292, cardH: 300, tabW: 54, tabH: 28, step: 12, lidH: 350, pad: 14, head: 60, line: 21, text: 12, ask: 12.5, tabText: 8 }; type Dims = typeof WIDE; const TOP = 64; // room above the lid for a card at the top of its flight const CLEAR = 60; // how far a card overshoots so it clears the tabs before dropping behind them const SEAT = 60; // how far above the rim the standing card's bottom edge sits const PEEK = 22; // how much of the front card shows above the rim const svgUrl = (body: string, w: number, h: number) => `url("data:image/svg+xml;utf8,${encodeURIComponent(`${body}`)}")`; /** Oak figure: stretched noise turned into dark streaks. fx is along the grain, fy across it. */ const grain = (fx: number, fy: number, seed: number, strength = 1.5) => svgUrl(``, 600, 400); const PAPER_GRAIN = svgUrl(``, 220, 220); const OAK_FACE = `${grain(0.011, 0.82, 7, 2.6)}, ${grain(0.0022, 0.06, 3, 1.5)}`; const OAK_LID = `${grain(0.012, 0.7, 21, 2.4)}, ${grain(0.002, 0.05, 9, 1.4)}`; const OAK_UP = `${grain(0.8, 0.012, 4, 2.2)}, ${grain(0.05, 0.002, 5, 1.2)}`; const BRASS = "linear-gradient(180deg, #fff1bd 0%, #e0bb62 22%, #b98d33 55%, #8a6519 78%, #d9b660 100%)"; const TONES = ["#f4ebd7", "#f1e6cf", "#f5edda", "#efe3ca", "#f3e9d3", "#f0e5cd"]; const JITTER = [ { x: -1, r: 0.25 }, { x: 2, r: -0.3 }, { x: 0, r: 0.15 }, { x: -2, r: -0.2 }, { x: 1, r: 0.3 }, { x: -1, r: -0.15 }, ]; /** A card dropped on its edge: one firm landing and one small hop. */ const landing = (t: number) => (t < 0.62 ? (t / 0.62) * (t / 0.62) : 1 - 0.09 * Math.sin(((t - 0.62) / 0.38) * Math.PI)); function IndexCard({ i, d, rimY, active, reduce, onPick, uid }: { i: number; d: Dims; rimY: number; active: boolean; reduce: boolean; onPick: () => void; uid: string }) { const item = cards[i]; const rowTop = rimY - PEEK - i * d.step; const rise = rowTop - (rimY - SEAT - d.cardH); const y = useMotionValue(active ? -rise : 0); const rotate = useTransform(y, [0, -rise * 0.5, -rise], [JITTER[i].r, -0.9, 0]); const [behind, setBehind] = useState(active); const [out, setOut] = useState(active); const was = useRef({ active, behind: active, greeted: false }); useEffect(() => { const put = (b: boolean) => { was.current.behind = b; setBehind(b); }; if (was.current.active === active || reduce) { // nothing was pressed (first paint, or the frame changed size): sit where it belongs was.current.active = active; y.set(active ? -rise : 0); put(active); setOut(active); if (active || reduce || was.current.greeted) return; // once, on arrival, a finger runs along the tabs was.current.greeted = true; const hop = animate(y, [0, -9, 0], { duration: 0.5, delay: 0.75 + i * 0.11, ease: "easeInOut" }); return () => hop.stop(); } was.current.active = active; let live = true; let run = animate(y, y.get(), { duration: 0 }); const home = () => { run = animate(y, 0, { type: "spring", stiffness: 210, damping: 25 }); run.then(() => live && setOut(false)); }; if (active) { setOut(true); run = animate(y, -(rise + CLEAR), { duration: 0.44, ease: [0.3, 0, 0.12, 1] }); run.then(() => { if (!live) return; put(true); run = animate(y, -rise, { duration: 0.42, ease: landing }); }); } else if (was.current.behind) { run = animate(y, -(rise + CLEAR), { duration: 0.24, ease: [0.4, 0, 0.5, 1] }); run.then(() => { if (!live) return; put(false); home(); }); } else home(); return () => { live = false; run.stop(); }; }, [active, reduce, rise, y]); const tabLeft = (i * (d.cardW - d.tabW)) / (cards.length - 1); const paper = TONES[i % TONES.length]; return ( {/* the tab is the control: it is cut from the same sheet as the card */}

{/* printed rules: one red, the rest blue */}