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}
/>
)
}
More in Heroes
View all
SaaS Template
2.4K
Responsive Hero Banner
2K
Hero
1.2K
Centered Hero with Image Fan
932
Editorial Collage Hero
431
Glass Fold
212
HeroSectionWithGradient
336
Aero Hero-3
559
