Lucide Icon Drawer

Component 73

About

Icon Drawer with Lucide and Anime.js

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

Code

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

Usage.tsx

import { Atom, CircleArrowDown, Zap, Heart } from 'lucide-react';
import { useLucideDrawerAnimation } from "@/components/ui/lucide-icon-drawer";

export function Demo() {
  const root = useLucideDrawerAnimation();

  return (
    <div ref={root} className="flex flex-col items-center gap-4">
      <div className="flex flex-row gap-4">
        <Atom size={48} className="text-cyan-400" />
        <CircleArrowDown size={48} />
        <Zap size={48} className="text-yellow-400"/>
        <Heart size={48} className="text-red-600" />
      </div>
      <span className="text-sm text-neutral-400">Used Lucide Icon</span>
    </div>
  );
}