Components
Loading preview...
The Sliding Glow Tabs component is a modern reimagining of the classic tab navigation pattern. Instead of a static underline, it features a glowing gradient bar that smoothly slides beneath the active tab, creating a sense of motion and energy. Built with shadcn UI and Framer Motion, it feels futuristic yet minimal, balancing aesthetics with usability. The glowing indicator not only highlights the current selection but also enhances user feedback with fluid transitions. Its design adapts easily across light and dark themes, making it versatile for dashboards, content sections, or app navigation. By passing props, developers can customize the number of tabs, their labels, and the content panels, ensuring the component is flexible enough for a wide range of use cases while still maintaining a sleek, engaging look.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/sliding-tabsimport SlidingTabs from "@/components/ui/sliding-tabs";
export default function DemoOne() {
return (
<div className="flex items-center justify-center h-screen bg-background">
<SlidingTabs
defaultIndex={0}
items={[
{ key: "overview", label: "Overview", panel: <div> Overview content goes here</div> },
{ key: "activity", label: "Activity", panel: <div> Recent activity details here</div> },
{ key: "settings", label: "Settings", panel: <div> Settings configuration options</div> },
{ key: "profile", label: "Profile", panel: <div> Profile info and preferences</div> },
]}
onChange={(index) => console.log("Active tab index:", index)}
/>
</div>
);
}