介绍 shadcn-glass-ui：用于 React 的 Glassmorphism 组件库

Source: Dev.to

介绍

shadcn-glass-ui 是一个面向 React 的完整玻璃态（glassmorphism）组件库，可与现有的 shadcn/ui 项目无缝配合。它将 iOS/macOS 上的现代磨砂玻璃设计趋势引入你的应用，基于 shadcn/ui 的模式构建。

关键特性

• 55+ 组件 – 核心 UI、原子组件、复合组件、章节组件以及专用组件
• shadcn CLI 支持 – 只安装你需要的部分
• 3 种内置主题 – Glass（暗色）、Light、Aurora（渐变）
• AI 友好 – 为 Claude Code、GitHub Copilot、GPT 优化
• WCAG 2.1 AA – 完全符合可访问性标准
• 现代技术栈 – React 19.2、TypeScript 5.9、Tailwind v4.1、Vite 7
• ~110 KB gzipped – 可摇树、优化的打包体积
• 1355+ 测试 – 完备的测试覆盖

安装

npm install shadcn-glass-ui

安装单个组件（shadcn CLI）

npx shadcn add @shadcn-glass-ui/button-glass
npx shadcn add @shadcn-glass-ui/modal-glass
npx shadcn add @shadcn-glass-ui/card-glass

这种方式可以保持你的 bundle 尽可能小，并让你对源码拥有完整控制。
详细的 CLI 使用说明请参见 [Registry Usage Guide]。

基本用法

import { ButtonGlass, InputGlass, ThemeProvider } from 'shadcn-glass-ui';
import 'shadcn-glass-ui/dist/styles.css';

function App() {
  return (
    
      
        
          Click me! ✨
        
        
      
    
  );
}

组件分类

可自定义的模糊强度

// 轻微玻璃效果（8 px 模糊）

  Light frosted effect

// 标准 glassmorphism（16 px 模糊 – 默认）

  Classic glass look

// 强烈玻璃效果（24 px 模糊）

  Maximum frosted glass

以不同元素渲染（Radix Slot 模式）

import { ButtonGlass } from 'shadcn-glass-ui';
import { Link } from 'react-router-dom';

// 将按钮渲染为 React Router Link

  View Profile

// 将按钮渲染为锚点

  
    External Link
  

复杂组件的细粒度控制

import { ModalGlass } from 'shadcn-glass-ui';

  
  
    
      Confirm Action
      
    
    
      
This action cannot be undone.

    
    
       setIsOpen(false)}>Cancel
      Confirm
    
  

AI‑友好设计

• 丰富的 JSDoc – 每个组件都包含带 @example 的详细文档。
• 严格的 TypeScript – 完整的类型推断，支持自动补全。
• 机器可读的导出 – EXPORTS_MAP.json 用于 AI 发现。
• 决策树 – 帮助 AI 选择合适的组件。
• 组件目录 – 可搜索的 COMPONENTS_CATALOG.md。

使用 GitHub Copilot 的示例

// Prompt Copilot: "Create a user profile card with avatar, name, and stats"

  
    
    
      
### John Doe

      
@johndoe

    
  

主题

import { ThemeProvider, useTheme } from 'shadcn-glass-ui';

function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();

  return (
     setTheme(e.target.value)}>
      🌑 Glass (Dark)
      ☀️ Light
      🌈 Aurora (Gradient)
    
  );
}

可访问性（WCAG 2.1 AA）

• 键盘导航（Tab、Enter、方向键）
• 屏幕阅读器支持（正确的 ARIA 标签）
• 可见的焦点指示器
• 最低对比度 4.5:1
• 触控目标 ≥ 44 × 44 px（Apple HIG）
• 减少动画支持（prefers-reduced-motion）

已运行 650+ 自动化可访问性测试以确保合规。

在线演示 & 资源

• 在线演示: [Storybook]
• GitHub 仓库: [GitHub]
• npm 包: [npm]
• 入门指南: [Guide]
• AI 使用指南: [AI Guide]
• shadcn CLI 注册表指南: [Registry Guide]

接下来会有什么？

本系列即将发布的文章：

• 深入剖析 – 技术架构与设计决策
• AI 辅助开发 – 使用 Claude Code 与 Copilot 构建 UI
• 实战项目 – 创建 GitHub 分析仪表盘

shadcn-glass-ui 采用 MIT 许可证开源，欢迎贡献。

• 发现 bug？ 在 GitHub 上提交报告。
• 有想法？ 发起讨论。
• 想贡献代码？ 请参阅 Contributing Guide。

支持项目

如果你觉得 shadcn-glass-ui 有用：

• ⭐ 为 GitHub 仓库加星
• 在下一个项目中尝试使用它
• 在评论或 GitHub Issues 中分享你的反馈

---

感谢阅读！祝编码愉快！ 🚀✨