Expandable Action Bar
A compact row of icons that opens into labelled actions when a pointer rests on it or it takes focus, with spring motion. On touch, the first tap opens it and the second acts. The base of Floating Nav.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | ExpandableActionBarItem[] | — | id, label and icon, with optional onClick, disabled, active, badge and shortcut. |
| onAction | (item) => void | — | Called when an item is chosen. |
| activeId | string | — | The highlighted item. |
| expanded | boolean | — | Holds it open or closed. Leave unset to let it follow hover and focus. |
| defaultExpanded | boolean | false | Its starting state, when uncontrolled. |
| onExpandedChange | (expanded: boolean) => void | — | Called when it opens or closes. |
| size | "sm" | "md" | "md" | Its size. |
| expandOnHover | boolean | true | Opens when a hovering pointer rests on it; on touch, the first tap opens it. |
| expandOnFocus | boolean | true | Opens when it takes keyboard focus. |
| collapseDelay | number | — | How long it waits before closing, in milliseconds. |
| classNames | { root, track, item, activeItem, icon, label, badge, shortcut } | — | Classes for each part. |
| renderItem | (item, state) => ReactNode | — | Draws an item yourself. |
| className | string | — | Classes for the root element. |