20 Demons

Cards

About

card hover effects

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

Code

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

Usage.tsx

import { Component } from '@/components/ui/20-demons';

const demons = [
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Abaddon%2C%20Lord%20of%20Decay.png", title: "Abaddon", status: "Lord of Decay" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Asmodeus%2C%20Soul%20Devourer.png", title: "Asmodeus", status: "Soul Devourer" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Astaroth%2C%20Harbinger%20of%20Ruin.png", title: "Astaroth", status: "Harbinger of Ruin" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Azazel%2C%20Herald%20of%20Despair.png", title: "Azazel", status: "Herald of Despair" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Baal%2C%20Prince%20Of%20Blight.png", title: "Baal", status: "Prince Of Blight" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Beelzebub%2C%20Bringer%20of%20Pestilence.png", title: "Beelzebub", status: "Bringer of Pestilence" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Belial%2C%20Eternal%20Tormentor.png", title: "Belial", status: "Eternal Tormentor" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Belphegor%2C%20Fiend%20of%20the%20Pit.png", title: "Belphegor", status: "Fiend of the Pit" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Dagon%2C%20Voice%20of%20the%20Deep.png", title: "Dagon", status: "Voice of the Deep" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Foras%2C%20Plaguebearer.png", title: "Foras", status: "Plaguebearer" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Leviathan%2C%20Warden%20of%20Abyss.png", title: "Leviathan", status: "Warden of Abyss" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Lilith%2C%20Queen%20of%20Night.png", title: "Lilith", status: "Queen of Night" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Mammon%2C%20Corruptor%20of%20Flesh.png", title: "Mammon", status: "Corruptor of Flesh" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Marbas%2C%20Twilight%20Beast.png", title: "Marbas", status: "Twilight Beast" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Moloch%2C%20Idol%20of%20Blood.png", title: "Moloch", status: "Idol of Blood" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Orobas%2C%20Oathbreaker.png", title: "Orobas", status: "Oathbreaker" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Paimon%2C%20Keeper%20of%20Secrets.png", title: "Paimon", status: "Keeper of Secrets" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Phenex%2C%20Ashen%20Phoenix.png", title: "Phenex", status: "Ashen Phoenix" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Verrine%2C%20Shadow%20of%20Greed.png", title: "Verrine", status: "Shadow of Greed" },
  { image: "https://pub-8aa68faf4a914c588fc08c804a0cbba4.r2.dev/Vine%2C%20Crown%20of%20Thorns.png", title: "Vine", status: "Crown of Thorns" }
];

export default function DemoOne() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-black to-neutral-900 p-8">
      <div className="flex flex-wrap justify-center gap-4">
        {demons.map((demon, idx) => (
          <Component
            key={idx}
            image={demon.image}
            title={demon.title}
            status={demon.status}
          />
        ))}
      </div>
    </div>
  );
}