Components

Animated Tabs

Tabs where the active pill slides between triggers as a shared element and the panel cross-fades with a small drift.

Hovers and presses. Fast settle, no wobble.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add animated-tabs

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { AnimatedTabs } from "@lumora/ui/components/animated-tabs";
// or from the barrel:
import { AnimatedTabs } from "@lumora/ui";

Props worth knowing

items takes { value, label, content } objects; the active pill slides between triggers as a shared element. Works controlled via value/onValueChange or uncontrolled via defaultValue. Arrow keys, Home and End move the selection. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.