Components

Folder

An interactive folder drawn from CSS shapes: hovering tilts the front lid open on its bottom hinge while up to three items rise out of the slot with a stagger and a slight fan; clicking toggles it held open (button semantics with aria-expanded).

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add folder

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Folder } from "@lumora/ui/components/folder";
// or from the barrel:
import { Folder } from "@lumora/ui";

Props worth knowing

items takes up to three nodes that rise out of the slot with a stagger and a slight fan; label captions the folder and size sets its width in px (default 116). Hovering tilts the lid open on its bottom hinge; clicking toggles it held open — real button semantics with aria-expanded. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.