Festival Hero with Colour Pills

Heroes

About

A festival or event first screen: a giant headline with a highlighted word, a date line and cascading colourful category pills with emoji stickers that lift on hover. From VibeUI — 1,600+ components with agent-ready install briefs at vibeui.club.

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

Code

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

Usage.tsx

import { FestivalHero, type FestivalHeroTag } from "@/components/ui/festival-hero"

const tags: FestivalHeroTag[] = [
  { label: "#Music", color: "#ffe2d6", emoji: "🎸", href: "#program" },
  { label: "#Food", color: "#c2df37", emoji: "🌮", href: "#program" },
  { label: "#Talks", color: "#f1ddbc", emoji: "🎙️", href: "#program" },
  { label: "#Kids", color: "#9854d1", ink: "#fff", emoji: "🪁", href: "#program" },
  { label: "#Market", color: "#006461", ink: "#fff", emoji: "🧶", href: "#program" },
  { label: "#Cinema", color: "#f3c37d", emoji: "🎬", href: "#program" },
  { label: "#Sport", color: "#ffa5b1", emoji: "🏀", href: "#program" },
  { label: "#Night", color: "#122378", ink: "#fff", emoji: "🌙", href: "#program" },
  { label: "#Theatre", color: "#d9cafe", emoji: "🎭", href: "#program" },
  { label: "#City", color: "#464dff", ink: "#fff", emoji: "🚲", href: "#program" },
  { label: "#Workshops", color: "#fdb084", emoji: "✂️", href: "#program" },
  { label: "#Morning", color: "#98f5af", emoji: "🧘", href: "#program" },
]

export default function Demo() {
  return (
    <FestivalHero
      title={"Three days\nof the *city*"}
      meta="August 22–24 · Island Park · ticketed stages and free zones"
      tagsLabel="What's on"
      tags={tags}
    />
  )
}