Folder that opens on hover and fans out the files inside.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/folder-card
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { FolderCard } from "@/components/nextui/folder-card";23export function Example() {4return (5<FolderCard6sheets={[7<img key="a" src="/shots/home.png" alt="" className="size-full object-cover" />,8<img key="b" src="/shots/pricing.png" alt="" className="size-full object-cover" />,9<div key="c" className="grid size-full place-items-center bg-white text-[10px] font-semibold">README</div>,10]}11/>12);13}
| Prop | Type | Default | Description |
|---|---|---|---|
| sheets | ReactNode[] | Moodboard, chart and PDF sheets | Up to three sheets in slot order: back left, back right, front centre; each fills its sheet |
| className | string | – | Extra class on the root |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.