shadcn-glass-ui

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

Live Demo · npm · Docs

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

Why shadcn-glass-ui?

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

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:

AI Usage Guide →

Documentation

Requirements

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

Contributing

Contributions welcome! See CONTRIBUTING.md.

License

MIT — LICENSE

Built with shadcn/ui · Radix UI · Tailwind CSS

Star on GitHub if you find this useful!