# Side Folder
> Glassy blue folder on its side, documents sliding out to the right as the pocket swings open on hover
A shadcn/ui block from the [@affectui](https://www.affectui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/affectui/side-folder).
- Page, with a live preview: https://shadcn.exchange/r/affectui/side-folder
- Screenshot: https://shadcn.exchange/shot/affectui/side-folder/light.png
- Registry item: https://www.affectui.com/r/side-folder.json
- Listed: 2026-11-01, source last changed 2026-11-01
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/affectui/side-folder.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Files
### `illustrations/side-folder/side-folder.tsx`
```tsx
"use client";
import { useId } from "react";
/*
* Side Folder – a glassy folder turned on its side, in a single self-contained file.
* Three documents peek out to the right from behind a frosted front pocket with a tab on its edge.
* Hover the folder: the pocket swings forward and every document slides out on its own.
* The artwork scales with its container and keeps a 3 : 2 frame.
*/
export type SideFolderProps = {
className?: string;
/** Accessible description of the scene */
label?: string;
};
/* Front pocket on a 380 × 520 grid: a narrow top part and a wider tab towards the bottom */
const FRONT =
"M40 0H290Q330 0 330 40V318Q330 338 344 348L364 362Q380 372 380 396V480Q380 520 340 520H40Q0 520 0 480V40Q0 0 40 0Z";
const LINES = [78, 180, 140, 175, 126, 168, 110];
/* A mask (unlike clip-path: url()) also cuts the frosted blur to the pocket shape, and scales with the box */
const MASK = `url("data:image/svg+xml,${encodeURIComponent(
``,
)}") 0 0 / 100% 100% no-repeat`;
export function SideFolder({
className,
label = "Blue folder on its side, with three documents peeking out behind a frosted front pocket",
}: SideFolderProps) {
const id = "ui-sf" + useId().replace(/[^a-zA-Z0-9_-]/g, "");
return (
{/* React 19 hoists this into once, no matter how many instances render */}
{/* Back of the folder */}
{/* Documents – each one slides out on its own */}
{/* Frosted front pocket */}