Promo card · Components

tinted offer/nudge card · circular arrow CTA, dismiss X, generated art · one per screen

The native kit's real component, live in its web build at phone width. Follows this site's theme.

Usage

At most one per screen, and dismissible whenever it is promotional rather than required. The art is generated from the seed, so it needs no asset.

<PromoCard title body? action? onDismiss? tone? seed? icon? />

Already in every copy of the native kit:

import { PromoCard } from '@/components/kit/promo-card';

Exports: PromoCard
Source: apps/mobile/components/kit/promo-card.tsx
Packages: lucide-react-native@^1.21.0
Installs with: @kit-native/icon, @kit-native/lib-haptics, @kit-native/lib-utils, @kit-native/placeholder, @kit-native/text
Also searched as: banner, upsell, announcement, offer, nudge
Registry JSON: /r/native/promo-card.json

The web kit's real component, live. Follows this site's theme.

At most one per page, and dismissible whenever it is promotional rather than required. The art is generated from the seed.

<PromoCard title body? action? onDismiss? tone? seed? icon? />

Already in every copy of the web kit:

import { PromoCard } from '@/components/kit/promo-card';

Agents: the whole registry is at /llms.txt.