Folder

beta

A folder whose front hinges forward as two papers rise and fan apart.

Preview

The front unfolds and the papers rise. Close it midway to reverse the motion.

1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.
```
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
```
2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```
3. Add the illustration. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.
```
npx shadcn@latest add @txbrendan/folder
```

A feature section about files, shared work, or keeping documents together.
Set open when the surrounding content is revealed. The front hinges forward and two papers rise and fan apart. Their marks, lines, and chart reveal as they emerge; closing hides the details and returns the papers behind the front.
For CSS-driven disclosures, set --folder-open to 0 or 1 on the picture or an ancestor. It overrides the open prop without adding another state.
Set pattern to false when the surrounding design already provides a background.

A control for opening real files. Use a labeled control for that action.
A small icon beside text. This illustration needs room for the folder and papers.

label
What the picture shows, read out in its place.
string · default "A folder holding two documents"
open
Hinges the front toward the viewer and fans the papers above it. A change reverses an unfinished motion.
boolean · default false
pattern
A field of dots behind the folder.
boolean · default true
className
Extra classes on the root, including a --folder-open pose override.
string

Prop	Type	Default	What it does
label	string	"A folder holding two documents"	What the picture shows, read out in its place.
open	boolean	false	Hinges the front toward the viewer and fans the papers above it. A change reverses an unfinished motion.
pattern	boolean	true	A field of dots behind the folder.
className	string	-	Extra classes on the root, including a --folder-open pose override.

The root is one image named by label. Its drawing is hidden from screen readers, and nothing inside takes focus.
The folder and papers keep the same outer box in both states.
Reduced motion changes the paper and front positions without movement and reveals the details without a wipe or delay; their opacity and the hover shadow can still fade. The theme's Off setting removes all transitions.
The initial pose renders directly. A later opening takes twice --motion-duration-slow, with details delayed by --motion-duration-fast. Closing uses --motion-duration-close with no delay. Nothing repeats.

<Folder />

<Folder open pattern={false} />

<Folder open className="[--folder-open:0]" label="Documents stored in a folder" />