Shared Layout Background

Installation

pnpm dlx shadcn@latest add @paneui/shared-layout-bg

Usage

import { SharedLayoutBg, SharedLayoutBgItem } from "@/components/ui/shared-layout-bg"

<SharedLayoutBg>
  <SharedLayoutBgItem render={<a href="/overview" />}>Overview</SharedLayoutBgItem>
  <SharedLayoutBgItem render={<a href="/settings" />}>Settings</SharedLayoutBgItem>
</SharedLayoutBg>

Composition

SharedLayoutBg
└── SharedLayoutBgItem

Examples

Horizontal

Use for nav bars laid out in a row.

Pill Style

Use when the highlight should match a different surface or reach past each item.

Disabled

Motion

With reduced motion the pill jumps between items and only fades.

Keyboard

The highlight follows focus as well as hover, so tabbing through links moves it. It only adds the highlight; give items real roles and focusability (links, buttons).

API Reference

SharedLayoutBg

The group that owns the shared highlight. Also accepts every prop of div.

orientation= "vertical": "vertical" | "horizontal"; Stack items in a column or a row.
pillClassName: string; Classes for the gliding pill (colour, radius, shadow). Defaults to rounded-xl bg-secondary shadow-raised.
inset= 0: number; How far (px) the pill reaches past each item horizontally.

Prop	Type	Default	Description
orientation	"vertical" \| "horizontal"	"vertical"	Stack items in a column or a row.
pillClassName	string	—	Classes for the gliding pill (colour, radius, shadow). Defaults to `rounded-xl bg-secondary shadow-raised`.
inset	number	0	How far (px) the pill reaches past each item horizontally.

data-orientation: vertical or horizontal.

Data attribute	Description
data-orientation	`vertical` or `horizontal`.

SharedLayoutBgItem

One item. Renders a div unless you pass render. Also accepts every prop of div.

render: ReactElement | (props, state) => ReactElement; Replace the rendered element, e.g. <a /> or <button />.
disabled= false: boolean; Dim the item, skip it for the pointer and keep the highlight off it.

Prop	Type	Default	Description
render	ReactElement \| (props, state) => ReactElement	—	Replace the rendered element, e.g. `<a />` or `<button />`.
disabled	boolean	false	Dim the item, skip it for the pointer and keep the highlight off it.

data-active: Present while the item holds the highlight.

Data attribute	Description
data-active	Present while the item holds the highlight.