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

👋 Introduction

Hey Dev.to community! I'm excited to share shadcn-glass-ui — a comprehensive glassmorphism component library for React that works seamlessly with your existing shadcn/ui projects.

🎯 What is shadcn-glass-ui?

shadcn-glass-ui brings the modern glassmorphism design trend — that beautiful frosted glass effect from iOS and macOS — to your React applications. Built on top of shadcn/ui patterns, it offers two installation methods: full npm package or individual components via shadcn CLI.

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


• 📦 ~110KB gzipped — Tree-shakeable, optimized bundle


• 🧪 1355+ Tests — Comprehensive test coverage

📦 Installation Options

Option 1: Full Package (npm)

npm install shadcn-glass-ui

Option 2: shadcn CLI (Individual Components)

Copy only what you need — just like original shadcn/ui:

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.

🚀 Quick Start

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

import 'shadcn-glass-ui/dist/styles.css';



function App() {

  return (

    <ThemeProvider defaultTheme="glass">

      <div className="p-8 space-y-4">

        <ButtonGlass variant="primary" size="lg">

          Click me! ✨

        </ButtonGlass>

        <InputGlass placeholder="Enter text..." />

      </div>

    </ThemeProvider>

  );

}

That's it! You're ready to go. 🎉

🎨 Component Categories

shadcn-glass-ui organizes 55+ components into logical categories:

🔮 Glass Effect Intensity

One unique feature is customizable blur intensity on GlassCard:

// Subtle glass effect (8px blur)

<GlassCard intensity="subtle">

  Light frosted effect

</GlassCard>



// Standard glassmorphism (16px blur - default)

<GlassCard intensity="medium">

  Classic glass look

</GlassCard>



// Strong glass effect (24px blur)

<GlassCard intensity="strong">

  Maximum frosted glass

</GlassCard>

🆕 Advanced Patterns

asChild — Polymorphic Rendering

Render any component as a different element using Radix UI's Slot pattern:

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

import { Link } from 'react-router-dom';



// Render button as React Router Link

<ButtonGlass asChild>

  <Link to="/profile">View Profile</Link>

</ButtonGlass>



// Render button as anchor

<ButtonGlass asChild variant="primary">

  <a href="https://example.com" target="_blank">

    External Link

  </a>

</ButtonGlass>

Compound Components

Fine-grained control for complex components:

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



<ModalGlass.Root open={isOpen} onOpenChange={setIsOpen}>

  <ModalGlass.Overlay />

  <ModalGlass.Content>

    <ModalGlass.Header>

      <ModalGlass.Title>Confirm Action</ModalGlass.Title>

      <ModalGlass.Close />

    </ModalGlass.Header>

    <ModalGlass.Body>

      <p>This action cannot be undone.</p>

    </ModalGlass.Body>

    <ModalGlass.Footer>

      <ButtonGlass onClick={() => setIsOpen(false)}>Cancel</ButtonGlass>

      <ButtonGlass variant="primary">Confirm</ButtonGlass>

    </ModalGlass.Footer>

  </ModalGlass.Content>

</ModalGlass.Root>

🤖 AI-Friendly Design

What makes shadcn-glass-ui special is its optimization for AI coding assistants:

• 
  Rich JSDoc — Every component has 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:

// Type this comment and let Copilot suggest:

// Create a user profile card with avatar, name, and stats



<GlassCard className="p-6">

  <div className="flex items-center gap-4">

    <AvatarGlass src="/user.jpg" size="lg" />

    <div>

      <h3 className="font-bold">John Doe</h3>

      <p className="text-sm text-gray-400">@johndoe</p>

    </div>

  </div>

  <UserStatsLineGlass 

    repos={42} 

    followers={1234} 

    following={567} 

  />

</GlassCard>

🌈 Theme System

Three beautiful themes out of the box:

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



function ThemeSwitcher() {

  const { theme, setTheme } = useTheme();



  return (

    <select value={theme} onChange={(e) => setTheme(e.target.value)}>

      <option value="glass">🌑 Glass (Dark)</option>

      <option value="light">☀️ Light</option>

      <option value="aurora">🌈 Aurora (Gradient)</option>

    </select>

  );

}

♿ Accessibility First

All components are WCAG 2.1 AA compliant:

• ✅ Keyboard navigation (Tab, Enter, Arrow keys)


• ✅ Screen reader support (proper ARIA labels)


• ✅ Focus indicators (visible focus rings)


• ✅ Color contrast (4.5:1 minimum)


• ✅ Touch targets (44×44px minimum per Apple HIG)


• ✅ Reduced motion support (prefers-reduced-motion)

We run 650+ automated accessibility tests to ensure compliance.

📚 Resources

• 
  Live Demo: Storybook
  


• 
  GitHub: Repository
  


• 
  npm: Package
  


• 
  Getting Started: Guide
  


• 
  AI Usage: AI Guide
  


• 
  shadcn CLI: Registry Guide
  

🎯 What's Next?

In the coming weeks, I'll be publishing more articles in this series:

1. 
   Deep Dive — Technical architecture and design decisions


2. 
   AI-Assisted Development — Building UIs with Claude Code & Copilot


3. 
   Building a Real App — Creating a GitHub Analytics dashboard

🤝 Contributing

shadcn-glass-ui is open source (MIT license) and we welcome contributions!

• 🐛 Found a bug? Report it
  


• 💡 Have an idea? Start a discussion
  


• 🔧 Want to contribute? Check our Contributing Guide
  

⭐ Support the Project

If you find shadcn-glass-ui useful:

• Star the GitHub repository
  


• Share this article


• Try it in your next project

💬 Let's Connect!

I'd love to hear your feedback! Drop a comment below or reach out:

• GitHub: @Yhooi2
  

Thanks for reading! Happy coding! 🚀✨

Found this helpful? Follow me for more articles on React, TypeScript, and UI development.