01 / Tactile controls
Magnetic Tabs
Familiar tabs with a gentle pull toward the pointer. Selection stays clear and keyboard navigation remains immediate.
Everything important is close by.
Your download is ready and notifications are on.
Install
Copy the source into your project, or keep it behind a package.
Copy the source into your project and make it yours.
Usage
const items = [
{ value: "overview", label: "Overview", content: <p>Ready to go.</p> },
{ value: "activity", label: "Activity", content: <p>No new activity.</p> },
]
export function Example() {
return <MagneticTabs items={items} />
}API
itemsMagneticTabItem[]Labels, values, panels, and disabled states.defaultValuestringThe initially selected tab.valuestringThe selected value when controlled.onValueChange(value: string) => voidRuns when selection changes.classNamestringClasses for the root element.Accessibility
Base UI supplies tab semantics, arrow-key navigation, focus handling, and panel relationships. Pointer attraction is removed when reduced motion is enabled.