Scroll Text

A text component with smooth scroll animation on hover, perfect for navigation links.

FeaturesFeatures

PricingPricing

AboutAbout

"use client";

import { ScrollText } from "@/registry/sase/scroll-text";

export function ScrollTextDemo() {
  return (
    <div className="w-full max-w-2xl">
      <div className="flex flex-wrap items-center justify-center gap-6">
        <ScrollText text="Features" />
        <ScrollText text="Pricing" hoverColor="text-blue-400" />
        <ScrollText text="About" hoverColor="text-green-400" />
      </div>
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/scroll-text.json

Usage

import { ScrollText } from "@/components/ui/scroll-text";

<ScrollText text="Features" />

Custom Hover Color

You can customize the hover color:

<ScrollText text="Features" hoverColor="text-blue-400" />

Pricing Card Section Header

On This Page

Installation Usage Custom Hover Color