Naved

Illos Edge Hero

Heroes 22

About

Hero for API and infrastructure products with an animated HUD illustration of requests reaching the nearest edge. Headline, subcopy, two buttons, light and dark. Code is MIT; the illustration is under the Illos free license (illos.dev/license). 65 more free illustrations at illos.dev/library/free.

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

Code

How Illos Edge Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { IllosEdgeHero } from "@/components/ui/illos-edge-hero";

export default function Demo() {
  return (
    <div className="flex min-h-[640px] w-full items-center bg-background">
      <IllosEdgeHero />
    </div>
  );
}

More by Naved

View all
  • Illos Queue Empty State

    Illos Queue Empty State

    61
  • Illos Command Palette

    Illos Command Palette

    46
  • Illos AI Chat Empty State

    Illos AI Chat Empty State

    30
  • Illos Shader Feature Bento

    Illos Shader Feature Bento

    25
  • Illos Knowledge Sources

    Illos Knowledge Sources

    24
  • Illos Stats Card

    Illos Stats Card

    23
  • Illos Booking Card

    Illos Booking Card

    19
  • Illos Settings Panel

    Illos Settings Panel

    19

More in Heroes

View all
  • Responsive Hero Banner

    Responsive Hero Banner

    2.1K
  • SaaS Template

    SaaS Template

    2.6K
  • Centered Hero with Image Fan

    Centered Hero with Image Fan

    1K
  • Hero

    Hero

    1.3K
  • Hero 03

    Hero 03

    346
  • Hero Section

    Hero Section

    434
  • Editorial Collage Hero

    Editorial Collage Hero

    476
  • Hero with image, text and two buttons

    Hero with image, text and two buttons

    218

Explore more

Part of Illos — browse the full library on 21st.dev.