# Purchase Plan Card

Pricing card with radio-plan state and reusable checkout actions.

## Artifact

- ID: shop-purchase-plan
- Runtime: React
- Preview: Compiled React preview
- Manifest schema: 1
- Packages: None
- Tags: #pricing-card, #checkout, #css-modules, #react, #zero-extra-packages, #reduced-motion
- Source: /components/shop-purchase-plan/code
- Manifest: /components/shop-purchase-plan/manifest
- Preview route: /components/shop-purchase-plan/react-preview
- Download: /components/shop-purchase-plan/download

## Files

- components/shop-purchase-plan-card.tsx (tsx, 2248 bytes, sha256 5412e53a623dd3307f1f7a6cb922dede0b0848830dcf670888d5cfb09f63dd9f)
- components/shop-purchase-plan-card.module.css (css, 1852 bytes, sha256 f6080e21ed4ef5ec2b58d8809270869695a54352f6e1a0c16bd0d384504547ef)
- components/shop-glassy-button.tsx (tsx, 859 bytes, sha256 fafcfb04d0482667e7e0fe9168f12cab4dc50e6243a6ae24225007a419cb150c)
- components/shop-glassy-button.module.css (css, 3833 bytes, sha256 92903c0a33a30be27fa5a7a72d71f4ded5813e79ba7d2b528c9b0743e3899a47)

## Assets

- None

## Integration Steps

1. Copy the files listed below into your React app.
2. Keep CSS Module files beside the TSX files that import them.
3. Preserve the relative paths between `components/shop-purchase-plan-card.tsx`, `components/shop-purchase-plan-card.module.css`, `components/shop-glassy-button.tsx`, `components/shop-glassy-button.module.css`.
4. Import the copied component from the path you keep in your project.
5. Move any `public/` assets into your app public directory at the same path, or update the asset URLs.

## Motion And Performance

- Motion types: transition
- Animated properties: transform, opacity, background-color
- Reduced motion: yes
- Action button feedback stays on transform and opacity.
- Radio selection is represented in CSS with data-selected state.