# Manila File Folder Tabs in a Steel Desk Rack That Tip Forward like Records in a Crate to Show the Chosen File
> Folder tabs in 3D: manila folders stand in a steel rack and tip forward like records in a crate to show the file you picked. Free React and HTML to copy.
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/manila-file-folder-tabs-in-a-steel-desk-rack-that-tip-forward-like-records-in-a-crate-to-show-the-chosen-file).
- Page, with a live preview: https://shadcn.exchange/r/weinc/manila-file-folder-tabs-in-a-steel-desk-rack-that-tip-forward-like-records-in-a-crate-to-show-the-chosen-file
- Screenshot: https://shadcn.exchange/shot/weinc/manila-file-folder-tabs-in-a-steel-desk-rack-that-tip-forward-like-records-in-a-crate-to-show-the-chosen-file/light.png
- Registry item: https://we.inc/r/manila-file-folder-tabs-in-a-steel-desk-rack-that-tip-forward-like-records-in-a-crate-to-show-the-chosen-file.json
- Listed: 2026-10-28, source last changed 2026-10-28
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/weinc/manila-file-folder-tabs-in-a-steel-desk-rack-that-tip-forward-like-records-in-a-crate-to-show-the-chosen-file.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/manila-file-folder-tabs-in-a-steel-desk-rack-that-tip-forward-like-records-in-a-crate-to-show-the-chosen-file.tsx`
```tsx
import { useEffect, useId, useRef, useState, type CSSProperties, type KeyboardEvent } from "react";
import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion";
/** One folder per tab, front of the rack first. `tab` is typed on the label; `band` is the colour stripe on it. */
const studio = { name: "Vale Street Studio", drawer: "Shoot files", hint: "Press a tab to flip to that file" };
const files = [
{
tab: "Citrus", band: "#f07d1a", ref: "041", set: "Studio 2, orange cove", light: "One hard key, no fill",
photo: "https://images.pexels.com/photos/18505997/pexels-photo-18505997.jpeg?auto=compress&cs=tinysrgb&w=700", tone: "#e8791c",
alt: "A woman in a white top lying on an orange floor among scattered oranges, holding half an orange up to one eye",
notes: "The whole set is painted the colour of the fruit, so only the white top and the skin read. Shoot from the ladder. Keep six spare oranges for the cut halves.",
},
{
tab: "Cobalt", band: "#2f63d6", ref: "042", set: "Studio 1, blue paper", light: "Soft top light, floor flagged",
photo: "https://images.pexels.com/photos/30755172/pexels-photo-30755172.jpeg?auto=compress&cs=tinysrgb&w=700", tone: "#1f5fae",
alt: "A woman in pale blue denim crouching with her arms crossed against a deep blue backdrop",
notes: "Tone on tone: washed denim against nine metres of cobalt paper. Hair goes up as high as it will stand. Leave the floor seam in, because it gives the frame a horizon.",
},
{
tab: "Halo", band: "#f2c21b", ref: "043", set: "Studio 3, grey wall", light: "Snooted spot, yellow gel",
photo: "https://images.pexels.com/photos/8542206/pexels-photo-8542206.jpeg?auto=compress&cs=tinysrgb&w=700", tone: "#b58a12",
alt: "A figure in a black hat and a beige suit standing in front of a glowing yellow circle of light",
notes: "One spot with a yellow gel makes the sun. The subject stands a metre off the wall so that the shadow falls inside the circle. The hat brim stays level in every frame.",
},
{
tab: "Mesa", band: "#b5482a", ref: "044", set: "Red quarry, east track", light: "Open shade, last hour",
photo: "https://images.pexels.com/photos/15047595/pexels-photo-15047595.jpeg?auto=compress&cs=tinysrgb&w=700", tone: "#b9b4a8",
alt: "A woman in a long white dress sitting on pale ground in front of a red sandstone outcrop",
notes: "Drive out for the last hour, when the rock turns from orange to brick. The dress is spread wide and pinned to the ground. Bring water, boards and a broom for the footprints.",
},
{
tab: "Ember", band: "#e2341d", ref: "045", set: "Studio 2, red wall", light: "Two heads, bare bulbs",
photo: "https://images.pexels.com/photos/39325164/pexels-photo-39325164.jpeg?auto=compress&cs=tinysrgb&w=700", tone: "#e2401a",
alt: "A woman in an orange vest and a lime skirt seated against a saturated red and orange wall",
notes: "A neon vest, a lime skirt and a wall mixed two shades hotter than either. Bare bulbs for a hard shine on the skin. The white arm wraps stay on: they are the styling.",
},
];
// Two sets of measurements in pixels: one for desks, one for phones.
const WIDE = { fw: 640, fh: 344, tabW: 126, tabH: 32, m: 16, photoW: 204, photoH: 266, title: 50, text: 14.5, lead: 22.5, mono: 11, label: 11.5, wide: true };
const SLIM = { fw: 300, fh: 326, tabW: 66, tabH: 28, m: 9, photoW: 104, photoH: 138, title: 30, text: 12.5, lead: 18.5, mono: 9.5, label: 9, wide: false };
type Dims = typeof WIDE;
const GAP = 26; // distance between one folder's hinge and the next, going back
const PITCH = 27; // how far the camera looks down on the desk, in degrees
const LEAN = 8; // standing folders lean back on the rest this much
const flat = (i: number) => -(87.5 - 2.4 * i); // a tipped folder lies on the ones in front of it
const svgUrl = (body: string, w: number, h: number) => `url("data:image/svg+xml;utf8,${encodeURIComponent(``)}")`;
const FIBRE = svgUrl(``, 260, 260);
const BRUSHED = svgUrl(``, 500, 200);
const MANILA = "#e6c98f";
/** A folder dropped on the pile: it falls faster and faster, lands, and hops once. */
const fall = (t: number) => (t < 0.7 ? Math.pow(t / 0.7, 2.2) : 1 - 0.035 * Math.sin(((t - 0.7) / 0.3) * Math.PI));
function Clip({ className, style }: { className?: string; style?: CSSProperties }) {
return (
);
}
function Label({ i, d, active, focused }: { i: number; d: Dims; active: boolean; focused: boolean }) {
const f = files[i];
return (
{f.tab}
);
}
function Folder({ i, d, tipped, wait, reduce, active, shaded, covered, focused, uid, onPick, onKey, onFocus, setRef }: { i: number; d: Dims; tipped: boolean; wait: number; reduce: boolean; active: boolean; shaded: boolean; covered: boolean; focused: boolean; uid: string; onPick: () => void; onKey: (e: KeyboardEvent) => void; onFocus: (e: { on: boolean; el: HTMLElement }) => void; setRef: (el: HTMLButtonElement | null) => void }) {
const f = files[i];
const n = files.length;
const angle = useMotionValue(tipped ? flat(i) : LEAN);
const frontDim = useTransform(angle, [LEAN, -60], [0, 0.5]);
const was = useRef(tipped);
useEffect(() => {
if (was.current === tipped || reduce) {
was.current = tipped;
angle.set(tipped ? flat(i) : LEAN);
return;
}
was.current = tipped;
const run = tipped ? animate(angle, flat(i), { duration: 0.62, delay: wait, ease: fall }) : animate(angle, LEAN, { type: "spring", stiffness: 150, damping: 19, delay: wait });
return () => run.stop();
}, [tipped, reduce, wait, angle, i]);
const tl = (i * (d.fw - d.tabW)) / (n - 1);
const cut = 9;
const H = d.fh + d.tabH;
const shapeFront = `polygon(0 ${d.tabH}px, ${tl}px ${d.tabH}px, ${tl + cut}px 0, ${tl + d.tabW - cut}px 0, ${tl + d.tabW}px ${d.tabH}px, 100% ${d.tabH}px, 100% 100%, 0 100%)`;
const shapeBack = `polygon(0 0, 100% 0, 100% ${d.fh}px, ${tl + d.tabW}px ${d.fh}px, ${tl + d.tabW - cut}px 100%, ${tl + cut}px 100%, ${tl}px ${d.fh}px, 0 ${d.fh}px)`;
const face = { backfaceVisibility: "hidden" as const, WebkitBackfaceVisibility: "hidden" as const };
return (
{/* front: the folder with its sheet and print clipped on */}