Slide Text Button

​

Installation

npx shadcn@latest add @kokonutui/slide-text-button

​

Usage

import SlideTextButton from "@/components/kokonutui/slide-text-button";

export default function Example() {
  return (
    <div className="flex gap-2">
      <SlideTextButton 
        text="Browse Components"
        hoverText="Click to see more"
        href="/components/buttons/particle-button"
      />
      <SlideTextButton 
        text="Get Started"
        href="/docs"
        variant="ghost"
      />
    </div>
  );
}

​

Props

​

Variants

​

Default

​

Ghost

​

Dependencies

• motion/react (Framer Motion) - For text slide animation and entrance effect
• next/link - For client-side navigation
• @/lib/utils - Utility functions (cn)

​

Features

• Vertical text slide animation on hover
• Two visual variants (default and ghost)
• Smooth opacity and transform transitions
• Entrance animation (slides from right)
• Responsive width with minimum size
• Integrated Next.js Link component
• Dark mode support
• Works as anchor element with full accessibility