Motion Arrow Button
The Expanding Arrow Button driven by springs: the chip opens across the button with a little give, the chevrons run in one after another and a press dips it. As a button, or as a link for a destination that is a page.
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 |
|---|---|---|---|
| children | ReactNode | — | The label. |
| href | string | — | MotionArrowLink only: where it goes. |
| accentClassName | string | — | Classes for the accent chip. |
| labelClassName | string | — | Classes for the label. |
| accentSize | number | 52 | Resting width of the accent chip, in pixels. |
| accentRadius | number | 444 | Corner radius of the accent chip, in pixels. The button itself is a full pill. |
| ...button | HTMLMotionProps<"button"> | — | Any other button or Motion prop, className included. |