Folder Card
Show a collection as a bezelled folder card with blurred header art, a sloped tab and a counted stat line.
- Dependencies
- No extra packages
- Size
- 231 lines
- Controls
- 10 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/folder-card.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/folder-card.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the folder-card.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| caption | string | "Studio Notes|Folder Card" | Text over the art, top right; | breaks the line. Empty hides it. |
| title / subtitle | string | "Daily memo" / "Notes & Journaling" | Folder heading (an h3) and the grey line below it. |
| count / unit | number / string | 5 / "Doc" | Large number (padded to two digits) and the word after it. |
| total / totalLabel | number / string | 1270 / "Notes" | Bottom-right stat. |
| href | string | "#" | Makes the whole card one link. Empty renders an article. |
| image / imageAlt | string | "" / "" | Optional header photo. Empty draws the blurred light study in CSS, so the card needs no assets. |
| hot / warm | string | "#e01e00" / "#ff7a12" | Main and highlight colours of the drawn art. |
| frame / surface | string | "#000000" / "#1f1f1f" | Bezel and folder panel colours. |
| width | number | 560 | Maximum width in px; the card fills narrower containers. |
| countUp / drift | boolean | true / true | Count both numbers up on first view; drift the art slowly. |