Card
A card in parts (header, title, description, action, content, footer), outlined or muted, at two sizes. Interactive cards give hover and press feedback and can be selected, with one control inside stretched over the whole card. Promo Card is a ready-made one for an offer: a brushed-metal banner, a title, a price and a Metallic Link, in light and dark mode.
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 |
|---|---|---|---|
| variant | "outlined" | "muted" | "outlined" | Its surface. |
| size | "default" | "compact" | "default" | Spacing for every part. |
| interactive | boolean | false | Hover and press feedback, for a card that is one target. Put its control inside with CARD_TARGET_CLASS. |
| selected | boolean | false | Marks a selectable card as chosen. |
| CARD_TARGET_CLASS | string | — | Spread onto the card's one control to stretch its hit area over the whole card. |
| PromoCard | { brand, badge?, title, description?, note?, action: { label, href, external? } } | — | The offer card: a name and tag in the banner, a title, a description, a note such as a price, and the call to action as a Metallic Link. |
| className | string | — | Classes for the root element. |