Footer
A page footer: a quote that writes itself in handwriting, a piece of art such as the ASCII hands, columns of links whose labels scramble on hover, a credit line and an oversized faint wordmark whose descenders run off the 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 |
|---|---|---|---|
| columns | { title: string; links: { label, href, external? }[] }[] | — | The link columns. |
| quote | { text: string; attribution: string } | — | A handwritten quote at the top. A line break in the text is kept. |
| art | ReactNode | — | Something between the quote and the links, such as two ASCII Art hands. |
| logo | ReactNode | — | The mark at the start of the link row. |
| credit | ReactNode | — | The small line under the links, with room for buttons such as Agent View. |
| wordmark | string | — | An oversized, faint word along the bottom. |
| className | string | — | Classes for the root element. |