# 我构建了一个 Apple 风格的 Glassmorphism React 组件库 🚀

Source: Dev.to

我构建了什么

• ✨ 受苹果启发的玻璃拟态设计
• 🌙 深色模式优化
• 📝 完整的 TypeScript 支持
• 🎬 Framer Motion 动画
• ♿ 可访问（WCAG 2.1 AA）
• 🌳 可树摇（tree‑shakeable）

安装

npm install @mawtech/glass-ui

import '@mawtech/glass-ui/styles.css';

组件

GlassCard

任何玻璃 UI 的基础：

import { GlassCard } from '@mawtech/glass-ui';

function MyComponent() {
  return (
    <GlassCard>
      <h2>Hello World</h2>
      <p>This looks so clean!</p>
    </GlassCard>
  );
}

variant="glow" 会在悬停时添加细微的青色光晕。

GlassButton

看起来真的很高端的按钮：

import { GlassButton } from '@mawtech/glass-ui';

// Variants
// Primary
// Secondary
// Ghost
// Aurora ✨

aurora 变体拥有在青色、紫色和粉色之间切换的动画渐变——非常适合作为 CTA。

GlassInput

不再像 2010 年的表单：

import { GlassInput } from '@mawtech/glass-ui';

包括错误状态、图标以及内置的密码可见性切换。

实际示例

几分钟即可构建的登录卡片：

import { GlassCard, GlassInput, GlassButton } from '@mawtech/glass-ui';

function LoginCard() {
  return (
    <GlassCard>
      <h2>Welcome Back</h2>

      <GlassInput placeholder="Email" />
      <GlassInput type="password" placeholder="Password" />

      <GlassButton variant="primary">Sign In</GlassButton>

      <a href="#">Forgot password?</a>
    </GlassCard>
  );
}

所有 18 个组件

• GlassCard
• GlassButton
• GlassInput
• GlassTextarea
• GlassSelect
• GlassCheckbox
• GlassSwitch
• GlassModal
• GlassNavbar
• GlassSidebar
• GlassDropdown
• GlassTooltip
• GlassTabs
• GlassToast (with useToast hook)
• GlassProgress
• GlassAvatar
• GlassBadge
• GlassCommandPalette (CMD + K menu)

技术栈

• React 18+
• TypeScript
• Tailwind CSS
• Framer Motion
• Radix UI（用于可访问性）

我为什么要构建它

我运营 MAW Tech Solutions，正在构建多个 SaaS 产品。我需要在所有项目中保持一致且美观的 UI。与其在项目之间复制粘贴组件，我把它们抽取成了这个库。现在我在所有项目中都在使用它——你也可以。

链接

• 📦 npm:
• 📖 文档:
• 💻 GitHub:

接下来计划

• 亮色模式支持
• 更多组件变体
• Figma 设计套件
• 高级模板

试一试

npm install @mawtech/glass-ui

如果觉得有用，请在 GitHub 上给它点星 ⭐
期待听到你的反馈。你希望新增哪些组件？ 👇