Folder card
surfacesProA folder whose front slides down while the object inside rises out of it, behind a fixed clip; a link or a press-to-hold button.
Opening soon
Pro cannot be bought yet. The page opens when payment is ready.
Preview
The preview could not load.
Live demo. The theme switches the demo itself.
Code
folder-card.tsxPro
The code is locked
Folder card is part of Manniche UI Pro. A key unlocks the source of all 60 effects.
Opening soon€49 · Introductory price until 31 December 2026. €79 after that.
- One-off payment
- One developer
- Your key arrives by email straight away
- No VAT (§ 19 UStG)
Have a key? Get the code with the CLI or MCP.
The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up
CLI
npx shadcn@latest add @manniche-pro/folder-cardMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
FolderCardProps
| Prop | Type | Default | What it does |
|---|---|---|---|
label required | ReactNode | – | The name on the front, large. |
description | ReactNode | – | A short line under the name, in small mono type. |
code | ReactNode | – | A small mono code in the front's top-left corner, e.g. a part or file number. |
tab | string | – | The word on the tab at the back, in small capitals. |
children | ReactNode | – | The object inside the folder, e.g. an SVG drawing. It is decorative and hidden from screen readers. |
href | string | – | Makes the folder a link. Without it the folder is a button that holds itself open when pressed. |
target | string | – | – |
rel | string | – | – |
open | boolean | – | Controlled: keep the folder open. |
defaultOpen | boolean | false | – |
onOpenChange | (open: boolean) => void | – | Called when a press opens or closes the folder (button only). |
width | number | 252 | Width in pixels; the height stays 188. |
Also takes every prop from Omit<HTMLAttributes<HTMLElement>, 'children'>.
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.