Animated Background

Installation

npx shadcn@latest add @blank/animated-background

Usage

import { AnimatedBackground } from "@/components/ui/animated-background"

<AnimatedBackground defaultValue="a" className="rounded-full bg-item-secondary">
  <button data-id="a">Overview</button>
  <button data-id="b">Settings</button>
</AnimatedBackground>

Every child with a data-id gets the highlight behind it when its id is the value, plus data-active="true" to style its own content. The highlight is absolutely positioned, so nothing moves when it appears. With reduced motion it jumps instead of sliding.

AnimatedBackground renders no element of its own: put it inside the list, menu or tab bar that owns the semantics.

Examples

Hover

enableHover follows the pointer and keyboard focus, and clears when both leave — a menu or a nav list rather than a selection.

API Reference