@antadesign/stickers

Part of the Anta design system, this sticker pack is the companion to @antadesign/anta.

Square illustrated stickers, two flavors per name: a lightweight static SVG (Sticker{Name}) and a Lottie-driven animated version (Sticker{Name}Animated). Each one is its own named export, so your bundler ships only the stickers you actually use.

Kept as a separate package so that core anta carries no lottie-web — apps that don't use stickers never install the animation runtime. Stickers uses the compatible @antadesign/anta already installed by your app and pulls lottie-web transitively.

📖 Full documentation, the complete sticker gallery, and live demos: anta.design/components/sticker

Installation

npm install @antadesign/anta @antadesign/stickers

@antadesign/anta and react are peer dependencies (or alias react → preact/compat). Stickers accepts Anta >=0.3.31, so it uses the compatible version already selected by your app. As with Anta, pin exact installed versions rather than floating tags.

Usage

import '@antadesign/stickers/elements'   // register <a-sticker> / <a-sticker-animated> (client-side)
import { StickerCoding, StickerCodingAnimated } from '@antadesign/stickers'

<StickerCoding size={128} label="Writing code" />
<StickerCodingAnimated size={128} />

The element registration must run on the UI thread of a real browser (it needs HTMLElement). In SSR contexts (Astro, Next.js) import @antadesign/stickers/elements client-side only — same rule as @antadesign/anta/elements.

See also

• @antadesign/anta — the core design system.
• anta.design/components/sticker — props, sizing, animation control, and bringing your own stickers.