Components
Loading preview...
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.
@tahermaxse
npx shadcn@latest add https://21st.dev/r/tahermaxse/scroll-legendimport { 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>
)
}