Stepwise UI

Folder

A tactile folder - unified skeleton cards (or your own photos) tuck behind a frosted-glass front pocket. Pick a Hugeicons badge, any body color, and squircle corners throughout. It also powers File Uploader's folder variant - see that page for the real drag-and-drop, opens-on-hover, upload-progress demo.

Installation

npx stepwise-ui add folder

Showcase

Product shots36 photos
import { Folder } from '@/components/stepwise/folder'
import { Image02Icon } from '@hugeicons/core-free-icons'

// peek={0} → an empty folder; peek={3} (default) → filled
<Folder label="Product shots" count="36 photos" color="#bfdbfe" icon={Image02Icon} peek={3} />

Fan on hover

Hover, tap, or focus the folder and the cards lift out into a shallow arc. Hovering one shows its name; arrows page through five at a time and wrap around at either end.

Case files8 documents
// Hovering fans the cards out into an arc above the folder - hovering a
// card shows its name. Past five, arrows page through and wrap around.
const files = [{ name: 'Deposition_transcript.pdf' }, { name: 'Exhibit_A_photos.zip' }, /* … */]
<Folder files={files} label="Case files" color="#bfdbfe" icon={File01Icon} />

Colors & icon

Drive the folder color live with the ColorSwatch component, and pick any Hugeicons badge - it adopts a darker shade of the folder.

Design assets24 files
const SWATCH = ['#ddd6fe', '#2563eb', '#f5d98b', '#bfdbfe', '#fbcfe8', '#bbf7d0']
const [color, setColor] = useState('#bfdbfe')

// the icon adopts a darker shade of the folder color
<Folder color={color} icon={icon} label="Design assets" count="24 files" />
<ColorSwatch colors={SWATCH} value={color} onChange={setColor} />

Props

PropTypeDescription
label
string
Title under the folder.
count
string
Count / subtitle line.
color
string
Folder body color (any CSS color).
icon
IconSvgElement
A Hugeicons icon shown on the front pocket.
files
FolderFile[]
{ thumb, name, progress } - photo, skeleton card, or both; name shows in a tooltip on hover.
peek
number
Skeleton cards to show when no files given. Default 3.
blur
number
Frosted-glass blur on the pocket, px. Default 6.
size
number
Folder width in px. Default 260.
progress
number
Overall upload progress 0–100.
showLabel
boolean
Show the title. Default true.
showCount
boolean
Show the count line. Default true.
interactive
boolean
Enable drag-drop + click-to-browse.
toggleOnClick
boolean
Tap toggles the fan - the touch/keyboard path to the hover reveal. Off when an ancestor owns the click. Defaults to on unless interactive.
onFiles
(files: File[]) => void
Fires with dropped/selected files.
className
string
Merged onto the root.