# Shared Layout Background

> Move one hover background between related rows.

Source: https://www.honestui.com/docs/animated/shared-layout-bg

```tsx
import { ArrowUpRight } from "honestui/icons";

import { SharedLayoutBg } from "@/registry/default/animated/shared-layout-bg";

const links = ["Guides", "Templates", "Changelog"];

export function SharedLayoutBgDemo() {
  return (
    <SharedLayoutBg className="w-full max-w-sm" inset={12}>
      {links.map((label) => (
        <a
          key={label}
          href={`#${label.toLowerCase().replaceAll(" ", "-")}`}
          className="block w-full px-3 py-3 text-sm font-medium"
        >
          <span className="flex w-full items-center justify-between gap-4">
            <span>{label}</span>
            <ArrowUpRight className="size-4 shrink-0 text-muted-foreground" />
          </span>
        </a>
      ))}
    </SharedLayoutBg>
  );
}

```

## Overview [#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 [#installation]

<CliBlock commands="[&#x22;shared-layout-bg&#x22;]" />

## Usage [#usage]

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

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

## Accessibility [#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 [#api-reference]


  ### `children`

type: `ReactNode`

Rows that receive hover tracking.

  ### `pillClassName`

type: `string`

Class applied to the moving pill.

  ### `inset`

type: `number` · default: `20`

Horizontal pill inset relative to each row, in pixels.