Magnetic Tabs

A segmented control where the active background "pill" slides fluidly between items using framer-motion layout animations. The movement feels "magnetic"—snapping to the cursor or selection with spring physics.

Usage

Each tab variant is installed as a separate component to keep your bundle size small. Choose the style that matches your design system.

Neo-SaaS Style

Clean, minimal, and highly functional. Perfect for modern dashboards.

Installation

Legacy installation using the full registry URL:

pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/magnetic-tabs-neo-saas.json"

Neo-Brutal Style

Bold, high-contrast, and solid. Uses hard shadows and vibrant colors.

Installation

Legacy installation using the full registry URL:

pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/magnetic-tabs-neo-brutal.json"

Glassomorphic Style

Elegant, translucent, and glowing. Features frosted glass effects and subtle gradients.

Installation

Legacy installation using the full registry URL:

pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/magnetic-tabs-glassomorphic.json"

API Reference

Props

Prop	Type	Default	Description
`items`	`TabItem[]`	`-`	Array of tab items. Each item has `id`, `label`, optional `icon`, and optional `color` (Neo-Brutal).
`defaultValue`	`string`	`-`	The initial active tab ID (uncontrolled mode).
`value`	`string`	`-`	The active tab ID (controlled mode).
`onValueChange`	`(value: string) => void`	`-`	Callback fired when a tab is selected.
`className`	`string`	`-`	Additional CSS classes for the container.

TabItem Interface

interface TabItem {
  id: string;
  label: string;
  icon?: React.ElementType; // Lucide icon e.g.
  color?: string; // (Neo-Brutal only) Hex or Tailwind class for background
}