||

Shared Layout Background

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Move one hover background between related rows.

shared-layout-bg-demo

Overview

Shared Layout Background adds a single animated pill behind hovered children. Use it to connect a small list of related navigation or action rows without changing their semantics.

Installation
npx honestui@latest add shared-layout-bg

Usage

 
import { SharedLayoutBg } from "@/components/animated/shared-layout-bg"

<SharedLayoutBg>{links.map((link) => <a key={link.href} {...link} />)}</SharedLayoutBg>

Accessibility

The moving background is decorative. Children must provide their own focus indicators, labels, roles, and activation behavior. Reduced motion swaps the background without traveling between rows.

API Reference
PropTypeDefaultDescription
children*ReactNode–Rows that receive hover tracking.
pillClassNamestring–Class applied to the moving pill.
insetnumber20Horizontal pill inset relative to each row, in pixels.