--- /** * Tabs — a row of pill-style tab buttons sharing a single highlight that * morphs to whichever tab is active (the layoutId morph of the original, * reproduced by repositioning one absolutely-positioned element with a * CSS transition — the card-hover-effect pattern), above a 3D stack of * content cards (the card-stack pattern: scale/translate offsets animated * by CSS transitions). Clicking a tab reorders the stack so its card * comes to the front with a short drop-and-settle bounce (the original's * y: [0, 40, 0] keyframe); hovering a tab fans the back cards apart. Panel * content is provided per tab via a named slot `panel-`. Custom * element; no animation library. */ interface TabItem { /** Label shown on the tab button. */ title: string; /** Unique key; also the name suffix of this tab's `panel-` slot. */ value: string; } interface Props { /** Tabs to render, in order. The first tab starts active. */ tabs: TabItem[]; /** Additional classes for the root element. */ class?: string; } const { tabs, class: className } = Astro.props; const uid = `nui-tabs-${Math.random().toString(36).slice(2, 9)}`; ---

{ tabs.map((tab, index) => ( )) }

{ tabs.map((tab, index) => (

)) }

Installation

Install dependencies

Add these files

Configuration

Use it