Icon Folder

Component 154

About

Glass folder that fans out your tool icons on hover. Hover each icon to lift it with a tooltip and highlight its tag. Dark and light themes, click and keyboard toggle, reduced-motion support. Bring your own icons via src or ReactNode. Zero dependencies.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Icon Folder to your project and fits it to your theme.

Code

How Icon Folder is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { IconFolder, DEFAULT_ICONS } from "@/components/ui/icon-folder";

/* Live controls (21st Demo Controls). */
const settings = {
  darkMode: true,
  iconCount: 4,
  spread: 70,
  startOpen: false,
  showPill: true,
};

export default function IconFolderDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  const dark = s.darkMode;
  const count = Math.max(1, Math.min(DEFAULT_ICONS.length, Math.round(s.iconCount)));
  const icons = React.useMemo(() => DEFAULT_ICONS.slice(0, count), [count]);
  const tags = React.useMemo(() => icons.map((i) => i.label ?? ""), [icons]);

  return (
    <div
      className="flex min-h-screen w-full items-center justify-center px-6 py-16"
      style={{
        /* dot grid from the "work with AI" block of vasnev.art */
        backgroundColor: dark ? "#121212" : "#ececea",
        backgroundImage: `radial-gradient(circle, ${dark ? "rgba(255,255,255,.035)" : "rgba(0,0,0,.06)"} 0 1px, transparent 1.4px)`,
        backgroundSize: "20px 13px",
        backgroundPosition: "-6px -1px",
      }}
    >
      <IconFolder
        theme={dark ? "dark" : "light"}
        title="Design"
        tags={tags}
        icons={icons}
        spread={s.spread}
        defaultOpen={s.startOpen}
        showPill={s.showPill}
      />
    </div>
  );
}