shadcn-glass-ui 소개: React용 Glassmorphism 컴포넌트 라이브러리 🎨

Source: Dev.to

Introduction

shadcn-glass-ui는 기존 shadcn/ui 프로젝트와 원활하게 작동하는 포괄적인 글래스모피즘 컴포넌트 라이브러리입니다. iOS/macOS에서 영감을 받은 최신 서리‑유리 디자인 트렌드를 애플리케이션에 도입하며, shadcn/ui 패턴 위에 구축되었습니다.

Key Features

• 55+ components – Core UI, Atomic, Composite, Sections, and Specialized
• shadcn CLI support – Install only what you need
• 3 built‑in themes – Glass (dark), Light, Aurora (gradient)
• AI‑friendly – Optimized for Claude Code, GitHub Copilot, GPT
• WCAG 2.1 AA – Full accessibility compliance
• Modern stack – React 19.2, TypeScript 5.9, Tailwind v4.1, Vite 7
• ~110 KB gzipped – Tree‑shakable, optimized bundle
• 1355+ tests – Comprehensive test coverage

Installation

npm install shadcn-glass-ui

Install individual components (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

이 방법은 번들을 최소화하고 소스 코드를 완전히 제어할 수 있게 해줍니다.
자세한 CLI 사용법은 [Registry Usage Guide] 를 참고하세요.

Basic Usage

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

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

Component Categories

Customizable Blur Intensity

// Subtle glass effect (8 px blur)

  Light frosted effect

// Standard glassmorphism (16 px blur – default)

  Classic glass look

// Strong glass effect (24 px blur)

  Maximum frosted glass

Rendering as a Different Element (Radix Slot pattern)

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

// Render button as React Router Link

  View Profile

// Render button as an anchor

  
    External Link
  

Fine‑Grained Control for Complex Components

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

  
  
    
      Confirm Action
      
    
    
      
This action cannot be undone.

    
    
       setIsOpen(false)}>Cancel
      Confirm
    
  

AI‑Friendly Design

• Rich JSDoc – Every component includes detailed documentation with @example.
• TypeScript strict – Full type inference for autocomplete.
• Machine‑readable exports – EXPORTS_MAP.json for AI discovery.
• Decision trees – Helps AI choose the right component.
• Component catalog – Searchable COMPONENTS_CATALOG.md.

Example with GitHub Copilot

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

  
    
    
      
### John Doe

      
@johndoe

    
  

Themes

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

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

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

Accessibility (WCAG 2.1 AA)

• Keyboard navigation (Tab, Enter, Arrow keys)
• Screen‑reader support (proper ARIA labels)
• Visible focus indicators
• Minimum contrast ratio 4.5:1
• Touch targets ≥ 44 × 44 px (Apple HIG)
• Reduced‑motion support (prefers-reduced-motion)

650개 이상의 자동화된 접근성 테스트가 실행되어 준수를 보장합니다.

Live Demo & Resources

• Live Demo: [Storybook]
• GitHub Repository: [GitHub]
• npm Package: [npm]
• Getting Started Guide: [Guide]
• AI Usage Guide: [AI Guide]
• shadcn CLI Registry Guide: [Registry Guide]

What’s Next?

Upcoming articles in this series:

• Deep Dive – Technical architecture and design decisions
• AI‑Assisted Development – Building UIs with Claude Code & Copilot
• Building a Real App – Creating a GitHub Analytics dashboard

shadcn-glass-ui는 오픈 소스(MIT 라이선스)이며 기여를 환영합니다.

• 버그를 발견했나요? GitHub에 보고하세요.
• 아이디어가 있나요? 토론을 시작하세요.
• 기여하고 싶나요? Contributing Guide 를 확인하세요.

Support the Project

If you find shadcn-glass-ui useful:

• ⭐ GitHub 저장소에 별표 달기
• 다음 프로젝트에 사용해 보기
• 댓글이나 GitHub 이슈를 통해 피드백 공유

---

읽어 주셔서 감사합니다! 즐거운 코딩 되세요! 🚀✨