Loading…

Folder

beta

A folder illustration whose sheets fan out on hover and lift out as its flap tips open in 3D when pressed.

Display
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add folder

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Folder } from "@/components/ui/folder";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Primary
Inverted
Open
Sizes
With Thumbnails
With Emoji
Reveals Contents
Hidden Label
Disabled
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Folder>

Prop	Type	Default
`defaultOpen` Initial open state when uncontrolled.	`boolean`	`false`
`hideLabel` Keeps `label` as the accessible name but hides the caption visually.	`boolean`	`false`
`items` Previews for the sheets, back to front — thumbnails, emoji, icons. Up to three are shown; sheets without one show faint lines. Decorative: they are hidden from assistive technology, so describe the contents elsewhere.	`ReactNode[]`	—
`label` The folder's name: its visible caption and its accessible name.	`ReactNode`	`"Folder"`
`onOpenChange` Called when a click, Enter, Space or Escape opens or closes the folder.	`(open: boolean) => void`	—
`open` Controlled open state.	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`tone`	`"neutral" \| "primary" \| "inverted"`	`"neutral"`

Plus every attribute of <button> except children.

Accessibility

One native button with aria-expanded — a screen reader announces the folder as collapsed or expanded, the vocabulary it already has for a container opening (aria-pressed would describe a setting switched on). Its accessible name is `label`, which is also the visible caption, or visually hidden with `hideLabel`. The artwork and any `items` previews are aria-hidden, since a button flattens its content into its name; describe real contents elsewhere and point `aria-controls` at them. Enter and Space toggle it natively, Escape closes it, keyboard focus fans the sheets the way hover does, and it has the shared focus ring. The motion is CSS transitions through the motion scale, so under reduced motion the poses apply instantly.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

defaultOpen

Initial open state when uncontrolled.

boolean

false

hideLabel

Keeps label as the accessible name but hides the caption visually.

boolean

false

items

Previews for the sheets, back to front — thumbnails, emoji, icons. Up to three are shown; sheets without one show faint lines. Decorative: they are hidden from assistive technology, so describe the contents elsewhere.

ReactNode[]

—

label

The folder's name: its visible caption and its accessible name.

ReactNode

"Folder"

onOpenChange

Called when a click, Enter, Space or Escape opens or closes the folder.

(open: boolean) => void

—

open

Controlled open state.

boolean

—

size

"sm" | "md" | "lg"

"md"

tone

"neutral" | "primary" | "inverted"

"neutral"