The AuthShowcase component is a modern, developer-friendly section designed to showcase authentication code snippets in an interactive and visually appealing way. It combines a textual marketing area on the left—highlighting the benefits of secure and fast authentication—with a tabbed code display on the right. Users can switch between popular languages like JavaScript, Python, Go, and Ruby, instantly previewing the corresponding code sample in a uniform, fixed-size code block. The code block features a clean dark theme, a header displaying the filename, and a convenient copy-to-clipboard button to make it easy for developers to grab the code. Its layout is fully responsive, making it ideal for landing pages, documentation sites, or product showcases where demonstrating API usage or integrations is key.
"use client";
import { AuthShowcase } from "@/components/ui/auth-showcase";
export default function AuthShowcasePage() {
return (
<main className="min-h-screen bg-background">
{/* Header */}
<header className="border-b py-6">
<div className="container">
<h1 className="text-2xl font-bold">🔐 Auth Showcase (Constant Code Block)</h1>
<p className="text-muted-foreground text-sm">
A demo of a fixed-size, clean code block built using Shadcn UI only.
</p>
</div>
</header>
{/* Component */}
<AuthShowcase />
{/* Footer */}
<footer className="border-t py-6">
<div className="container text-center text-sm text-muted-foreground">
© {new Date().getFullYear()} Built with ❤️ using Next.js & Shadcn UI
</div>
</footer>
</main>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.