# Folder

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

- Name: `folder`
- Status: beta
- Categories: files, documents, organization, motion
- Files: the install writes `folder.tsx`, and any part files named `folder-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Gallery: https://arbokui.com/illustrations/folder
- Registry item: https://arbokui.com/r/folder.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the illustration. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @arbokui/folder
   ```

## Use it for

- 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.

## Avoid it for

- 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.

## Props

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

## Accessibility

- 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.

## Examples

### A closed folder

```tsx
<Folder />
```

### An open folder without dots

```tsx
<Folder open pattern={false} />
```

### A pose controlled by surrounding CSS

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