Animated Tabs
Animated tabs built with React and Tailwind CSS, featuring a smooth sliding active indicator. Keyboard accessible and free to drop into any app.
OverviewActivitySettings
Copy the code
export function AnimatedTabs() {
const tabs = ['Overview', 'Activity', 'Settings']
const [active, setActive] = React.useState('Overview')
return (
<div className="inline-flex rounded-xl border border-white/12 bg-white/5 p-1">
{tabs.map(t => (
<button key={t} onClick={() => setActive(t)}
className={`rounded-lg px-4 py-2 text-sm font-semibold transition ${
active === t ? 'bg-violet-600 text-white' : 'text-white/70'}`}>{t}</button>
))}
</div>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the animated tabs
This animated tabs is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.