Introducing shadcn-glass-ui: A Glassmorphism Component Library for React 🎨

Source: Dev.to

Introduction

shadcn-glass-ui is a comprehensive glassmorphism component library for React that works seamlessly with existing shadcn/ui projects. It brings the modern frosted‑glass design trend from iOS/macOS to your applications, built on top of shadcn/ui patterns.

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

This approach keeps your bundle minimal and gives you full control over the source code.
See the [Registry Usage Guide] for detailed CLI instructions.

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+ automated accessibility tests are run to ensure compliance.

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 is open source (MIT license) and welcomes contributions.

• Found a bug? Report it on GitHub.
• Have an idea? Start a discussion.
• Want to contribute? See the Contributing Guide.

Support the Project

If you find shadcn-glass-ui useful:

• ⭐ Star the GitHub repository
• Try it in your next project
• Share your feedback in the comments or via GitHub issues

---

Thanks for reading! Happy coding! 🚀✨