shadcn-glass-ui

Glassmorphism components for React — drop-in compatible with shadcn/ui. 59 components, 3 themes, zero migration.

Quick Start

npm install shadcn-glass-ui

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

export default function App() {
  return (
    <ThemeProvider defaultTheme="glass">
      <ButtonGlass variant="default">Click me</ButtonGlass>
    </ThemeProvider>
  );
}

Or via shadcn CLI — add to components.json:

{
  "registries": {
    "@shadcn-glass-ui": {
      "url": "https://raw.githubusercontent.com/Yhooi2/shadcn-glass-ui-library/main/public/r"
    }
  }
}

npx shadcn@latest add @shadcn-glass-ui/button-glass

Choose Your Path

| Goal | Resource | | ----------------------- | -------------------------------------------------------------- | | Get started | Getting Started Guide | | Browse components | Storybook | | Use with AI | AI Usage Guide | | Create custom theme | Theme Guide | | Migrate from v1.x | Breaking Changes |

Why shadcn-glass-ui?

| | shadcn-glass-ui | shadcn/ui | | ----------------- | ------------------------------- | ------------ | | Themes | 3 built-in (Glass/Light/Aurora) | 1 base | | Glass effects | Native blur, glow, transparency | Manual CSS | | Components | 59 specialized | ~40 base | | Custom theme | 15 lines CSS | Full rewrite | | AI docs | Context7, Claude Code, Copilot | Basic |

Works alongside shadcn/ui — same API, same CLI, no migration:

import { Button } from '@/components/ui/button';           // shadcn/ui
import { ButtonGlass } from '@/components/glass/ui/button-glass';  // Glass variant

<Button variant="outline">Standard</Button>
<ButtonGlass variant="default">Glassmorphism</ButtonGlass>

Components

| Category | Count | Examples | | --------------- | ----- | -------------------------------------------------- | | Core UI | 22 | ButtonGlass, InputGlass, ModalGlass, SidebarGlass | | Composite | 14 | MetricCardGlass, SplitLayoutGlass, AICardGlass | | Specialized | 9 | StepperGlass, SparklineGlass, RainbowProgressGlass | | Sections | 7 | HeaderNavGlass, ProfileHeaderGlass | | Atomic | 7 | SearchBoxGlass, ThemeToggleGlass |

Browse all 59 components →

Themes

Three built-in themes with instant switching:

• Glass — Dark glassmorphism with purple accents
• Light — Clean minimal with subtle glass
• Aurora — Gradient glow effects

const { theme, cycleTheme } = useTheme();
<button onClick={cycleTheme}>Theme: {theme}</button>;

Create custom themes in ~15 lines — Theme Guide

AI-Optimized

Built for AI coding assistants:

| Tool | Integration | | ---------------- | ------------------------------------------------------------------------------ | | Context7 MCP | Auto-indexed — 63 rules | | Claude Code | CLAUDE.md — 365 lines of context | | Copilot | TypeScript strict + JSDoc |

AI Usage Guide →

Documentation

| Resource | Description | | ------------------------------------------------------------------ | --------------------- | | Storybook | Interactive demos | | Getting Started | Installation & setup | | Component Catalog | All 57 components | | Theme Guide | Custom themes | | Token Architecture | 3-layer CSS system | | AI Usage | Claude, Copilot, GPT | | Breaking Changes | v1.x → v2.0 migration |

Requirements

• React 18+ or 19+
• Tailwind CSS 4.1+
• Node.js 20.16+

Contributing

Contributions welcome! See CONTRIBUTING.md.

License

MIT — LICENSE