Link Tree

Link-in-bio style link list with staggered animations and multiple visual styles.

Preview

Usage

import { LinkTree } from "@/components/profile"
import { ShoppingBag, Calendar, Mail } from "lucide-react"

const links = [
  { 
    id: "1", 
    title: "Shop My Store", 
    href: "/store", 
    icon: ShoppingBag,
    description: "Check out my latest products"
  },
  { 
    id: "2", 
    title: "Book a Session", 
    href: "/book", 
    icon: Calendar 
  },
  { 
    id: "3", 
    title: "Contact Me", 
    href: "/contact", 
    icon: Mail 
  },
]

<LinkTree links={links} variant="default" />

Variants

Default

Gradient

Outline

Props

Prop	Type	Default	Description
links	LinkItem[]	-	Array of link items
variant	"default" \| "gradient" \| "outline"	"default"	Link button style
animated	boolean	true	Enable stagger animations

LinkItem Type

interface LinkItem {
  id: string
  title: string
  href: string
  icon?: LucideIcon
  description?: string
  external?: boolean
}