Step Trail
Animated step breadcrumb with GSAP-driven progress bar between stages.
Component Showcase
Step Trail
Animated step breadcrumb with GSAP-driven progress bar between stages.
GSAPProgress
Choose Installation Method
Select how you want to add this component to your project
Run command in your project root
$ npx @melonui-dev/cli add step-trail
How to import and use
app/page.tsx
import { BreadcrumbTrail } from "@/components/step-trail";
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center bg-[#050505] p-8">
<BreadcrumbTrail />
</main>
);
}AI Automation Agent Prompt
Feed this prompt to Claude, ChatGPT, or Gemini to quickly write custom integrations, layouts, or configure props for this component on your system.
I want to integrate the MelonUI "Step Trail" component into my React/Next.js project.
Component description: "Animated step breadcrumb with GSAP-driven progress bar between stages."
CLI Installation command: `npx @melonui-dev/cli add step-trail`
Tags/Technologies used: GSAP, Progress
Please write a premium, responsive React page component in Next.js that:
1. Imports `BreadcrumbTrail` from `@/components/step-trail`.
2. Places it inside a visually stunning layout matching a dark-mode, glassmorphism design system.
3. Outlines its props and options with clean code structure and comments.