Scroll Legend

Navigation 47

About

A sleek, interactive scroll legend component inspired by the elegant UI of Raycast. Built with accessibility and performance in mind, this component enhances user experience by providing clear visual guidance during scroll interactions. Fully responsive, theme-aware (light/dark), and easy to integrate into any React or Next.js project. Perfect for dashboards, documentation sites, or any interface where progressive scrolling needs a little extra magic.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Legend to your project and fits it to your theme.

Code

How Scroll Legend is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ScrollLegend } from "@/components/ui/scroll-legend"

const legendItems = [
  { id: "ai-chat", name: "AI Chat" },
  { id: "quick-ai", name: "Quick AI" },
  { id: "ai-extensions", name: "AI Extensions" },
  { id: "ai-commands", name: "AI Commands" },
  { id: "models", name: "Models" },
  { id: "privacy", name: "Privacy" },
  { id: "pricing", name: "Pricing" },
  { id: "faqs", name: "FAQs" },
]

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-background">
      <ScrollLegend items={legendItems} />

      {/* Hero Section */}
      <section className="h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-6xl font-bold text-gray-900 dark:text-white mb-4">Scroll Legend</h1>
          <p className="text-xl text-gray-600 dark:text-gray-300">Scroll down to explore our features</p>
        </div>
      </section>

      {/* AI Chat Section */}
      <section id="ai-chat" className="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">AI Chat</h2>
         
        </div>
      </section>

      {/* Quick AI Section */}
      <section id="quick-ai" className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-800">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">Quick AI</h2>
        
        </div>
      </section>

      {/* AI Extensions Section */}
      <section id="ai-extensions" className="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">AI Extensions</h2>
        </div>
      </section>

      {/* AI Commands Section */}
      <section id="ai-commands" className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-800">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">AI Commands</h2>
        </div>
      </section>

      {/* Models Section */}
      <section id="models" className="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">Models</h2>
        </div>
      </section>

      {/* Privacy Section */}
      <section id="privacy" className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-800">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">Privacy</h2>
        </div>
      </section>

      {/* Pricing Section */}
      <section id="pricing" className="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">Pricing</h2>
        </div>
      </section>

      {/* FAQs Section */}
      <section id="faqs" className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-800">
        <div className="max-w-4xl mx-auto px-6">
          <h2 className="text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">FAQs</h2>
        
        </div>
      </section>
    </div>
  )
}