---
name: nikuma-folder
description: Add pastel Mac-style folder cards with a shape pressed into the front (shop, basketball, book, pencil ...) and cards that fan out on hover. Use when the user asks for folders, a folder view, or category cards in any framework (vanilla JS, Astro, React, Vue, Svelte, Solid).
---
# Folder cards
A grid of soft Mac-style folders. Every folder has a little shape pressed into its front, a count underneath, and three paper cards that peek out of the top and fan open on hover. A folder is either a link (`href`) or a button (`onOpen`).
One dependency-free file. `mountFolder(element, options)` builds everything inside `element` and **returns a `stop()` function** that removes it and cleans up all listeners. The framework wrappers below only call it in the right lifecycle hook.
## When to use
The user wants: folder cards, categories shown as folders, or a "folder view" for products, posts or files. Works in plain HTML, Astro, React (incl. Next.js), Vue (incl. Nuxt), Svelte (incl. SvelteKit) and Solid.
## How to add it
1. Save the file(s) under **Source** into the project (for example `src/lib/folder/`), keeping their names. They need no installation.
2. Vanilla / Astro / plain HTML: import the function in a `
```
### Svelte: `Folders.svelte`
```svelte
```
### Solid: `Folders.jsx`
```jsx
import { onMount, onCleanup } from 'solid-js';
import { mountFolder } from './folder.js';
export default function Folders(props) {
let root;
onMount(() => onCleanup(mountFolder(root, props.options || {})));
return ;
}
```