buzzvilbuzzvil:design-library
Design Library · Interaction Kit

Build Personalized Brand Interactions

41 composable, agent-driven components in one Components catalog — Primitives, Components, Modules, and Views — wired into 14 recipes, with a seed-based theming system for branded micro-experiences. Authoring decks, reports, or dashboards instead? See the Brand Kit.

Agent DocsBrowse RecipesBrand Guide

Explore the Interaction Kit

Components

41

The full composition catalog across four tiers — Primitives, Components, Modules, Views — filterable in one place.

Recipes

14

Pre-built, brand-themeable interaction flows composed from the catalog.

Agents

Component registry, composition rules, and JSON APIs for programmatic access.

Other kits

Brand Kit →

Authoring decks, reports, docs, and dashboards? The brand foundation — palettes, dataviz, and live document templates, all from the shared design tokens.

Quick Start

For Agents

Component registry, composition rules, and JSON APIs for programmatic access.

For Engineers

Design tokens, component imports, TypeScript types, and implementation guides.

For Designers

Brand seeds, theme customization, and real-world brand examples.

Getting Started

1. Configure GitHub Packages auth

Create a GitHub Personal Access Token (classic) with read:packages scope, then add it to your shell profile:

~/.zshrc
export GITHUB_TOKEN=ghp_xxxxxxxxxxxx

Then add an .npmrc file to your project root:

.npmrc
@buzzvil:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

2. Install

bash
pnpm add @buzzvil/design-library react react-dom framer-motion

3. Use

tsx
import { ThemeProvider } from '@buzzvil/design-library';
import { FlipCard } from '@buzzvil/design-library/experiences';
import { tokens } from '@buzzvil/design-library/tokens';

Entry Points

ImportDescription
@buzzvil/design-libraryThemeProvider and core utilities
@buzzvil/design-library/tokensColors, spacing, radii, typography, shadows, motion
@buzzvil/design-library/ixdInteraction primitives and motion hooks (usePressMotion, usePersonality, …)
@buzzvil/design-library/iconicIcon set and iconography primitives
@buzzvil/design-library/deliveryKit primitives — Surface, Pill, Scrim, Progress, Bubble
@buzzvil/design-library/experiencesGamification, missions, discovery, engagement, rewards (incl. FlipCard)
@buzzvil/design-library/manifestComponent registry, tier classifier, and the Query API
@buzzvil/design-library/recipesPre-built interaction recipes
@buzzvil/design-library/brandsBrand seeds and theme customization