Cartlify

Cartlify 是一款面向电商前端的生产级 React + TypeScript 组件库，旨在帮助开发者快速构建美观、可访问的在线商店界面。它提供了丰富的即用型组件、自定义钩子和设计令牌，让您无需从零开始，即可打造专业级的购物体验。

核心功能

• 组件丰富：包含 ProductCard（3种变体）、CartDrawer、CheckoutStepper、PageLoader 等核心电商组件，覆盖商品展示、购物车、结账流程等常见场景。
• 自定义钩子：提供 useCart、useDisclosure、useMediaQuery 三个实用钩子，简化状态管理与响应式设计。
• 设计系统：内置 40+ CSS 设计令牌，支持暗黑模式，并遵循 WCAG 2.1 无障碍标准，确保界面通用可用。

主要特性

• 零 CSS-in-JS：采用传统 CSS 方案，性能更优，易于集成。
• Tree-shakeable：支持 ESM/CJS 模块格式，按需加载，减小打包体积。
• 全面测试：包含 141 个 Jest 测试用例，保障组件稳定性。
• 框架兼容：开箱即用支持 Vite、Next.js 和 Remix。
• 免费开源：核心库通过 npm 免费获取，完整源码及商业许可可在 Gumroad 购买。

适用场景

• 快速搭建电商原型或 MVP
• 为现有电商项目添加现代化 UI 组件
• 学习 React 组件库开发与设计系统实践