Components
Loading preview...
The Magnetic Tabs component is a dynamic, interactive tab system designed for modern UIs. It features a magnetic indicator that smoothly “snaps” toward the hovered or active tab, giving a playful, physics-based feel. The indicator is larger than the tab buttons and can be customized with indicatorPadding to create a prominent, glowing effect. Each tab displays its corresponding content with smooth transitions, making the interface feel fluid and responsive. The component is fully responsive, supports light and dark themes, and can be centered on the page or embedded within layouts, offering a visually engaging and tactile tab navigation experience.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/magnetic-tabs// This is a demo file for the MagneticTabs component
// Users will see this in the preview
import MagneticTabs, { MagneticTabItem } from "@/components/ui/magnetic-tabs";
const tabItems: MagneticTabItem[] = [
{ value: "overview", label: "Overview", content: "Overview content goes here." },
{ value: "activity", label: "Activity", content: "Activity content goes here." },
{ value: "settings", label: "Settings", content: "Settings content goes here." },
{ value: "faq", label: "FAQ", content: "FAQ content goes here." },
];
export default function Demo() {
return (
<div className="flex items-center justify-center min-h-screen bg-background">
<MagneticTabs
items={tabItems}
defaultValue="overview"
indicatorPadding={8} // indicator size
className="max-w-xl"
/>
</div>
);
}