Glass UI

A beautiful, accessible glassmorphism React component library built with Tailwind CSS and Radix UI primitives.

Glass UI provides 30+ production-ready React components with stunning glassmorphism effects — translucent backgrounds, backdrop blur, and frosted glass aesthetics that work beautifully in both light and dark modes.

📚 Live Documentation

Explore all Glass UI components, variants, themes, and usage examples online:

🌐 Storybook: https://nishagraghu.github.io/glass-ui/storybook-static/?path=/docs/ui-tabs--docs

✨ Features

• 🎨 Glassmorphism Design — Frosted glass effects with backdrop blur, saturation, and translucent borders
• 🌗 Dark & Light Mode — Full theme support with automatic system preference detection
• ♿ Accessible — Built on Radix UI primitives following WAI-ARIA standards
• 📦 Tree-shakeable — Import only the components you need
• 🔧 TypeScript — Fully typed with excellent IDE autocompletion
• 🎯 30+ Components — Buttons, forms, modals, navigation, data display, and more
• 📱 Responsive — Works on all screen sizes
• ⚡ Zero Config — Works out of the box with Tailwind CSS projects

📦 Installation

npm install @nishag619/glass-ui

yarn add @nishag619/glass-ui

pnpm add @nishag619/glass-ui

Peer Dependencies

Glass UI requires React 18+ or 19+:

npm install react react-dom

🚀 Quick Start

1. Import the CSS

Add the styles to your root layout or main entry file:

import '@nishag619/glass-ui/styles.css';

2. Start Using Components

import { Button, Card, CardHeader, CardTitle, CardContent } from '@nishag619/glass-ui';

function App() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Welcome to Glass UI</CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-muted-foreground mb-4">
          Build beautiful interfaces with glassmorphism.
        </p>
        <Button variant="glass">Get Started</Button>
      </CardContent>
    </Card>
  );
}

3. Add Theme Support (Optional)

Wrap your app with the ThemeProvider for automatic dark mode:

import { ThemeProvider } from '@nishag619/glass-ui';

function Root() {
  return (
    <ThemeProvider defaultTheme="system">
      <App />
    </ThemeProvider>
  );
}

🧩 Components

Actions

| Component | Description | |-----------|-------------| | Button | Versatile button with 8+ variants including glass and glass-primary | | DropdownMenu | Context menu and dropdown with glass styling |

Forms

| Component | Description | |-----------|-------------| | Input | Text input with glass styling | | Checkbox | Accessible checkbox | | Label | Form label for accessibility | | Switch | Toggle switch | | Select | Dropdown select | | MultiSelect | Multi-value select with badges | | Combobox | Searchable autocomplete dropdown | | Textarea | Multi-line text input | | RadioGroup | Radio button group | | Slider | Range slider |

Layout

| Component | Description | |-----------|-------------| | Card | Glass panel container | | Divider | Horizontal/vertical separator with text support | | Accordion | Expandable content sections | | Tabs | Tabbed content panels | | Breadcrumb | Navigation breadcrumbs | | Sidebar | Collapsible sidebar navigation | | Skeleton | Loading placeholder |

Overlays

| Component | Description | |-----------|-------------| | Dialog | Modal dialog with backdrop overlay | | Modal | Full-featured modal with size/position variants | | Popover | Floating content panel | | Tooltip | Hover tooltip with glass styling | | Toast | Notification toast system |

Data Display

| Component | Description | |-----------|-------------| | Avatar | User avatar with fallback initials | | Badge | Status badges and labels | | Chip | Filter/action chips | | Table | Simple data table | | Progress | Progress bar | | NavigationMenu | Full navigation menu |

Templates

| Component | Description | |-----------|-------------| | LoginTemplate | Complete login page with glassmorphism |

🎨 Glassmorphism

Every component supports a glass variant that applies the frosted glass effect:

<Button variant="glass">Glass Button</Button>
<Card glass>Glass Card Content</Card>
<DialogContent glass>Glass Dialog</DialogContent>

Glass effects work best on gradient or image backgrounds. Use the Backgrounds toolbar in Storybook to preview components on different backgrounds.

Glass Utility Classes

| Class | Description | |-------|-------------| | glass | Basic glass effect | | glass-panel | Glass panel with shadow and rounded corners | | glass-light | Subtle glass effect | | glass-heavy | Strong blur and darker background | | glass-input | Input-specific glass styling | | glass-button | Button glass styling | | glass-modal | Modal-specific glass effect | | glass-dropdown | Dropdown glass styling |

Customizing Glass Effects

Use the GlassProvider to customize glass properties globally:

import { GlassProvider } from '@nishag619/glass-ui';

function App() {
  return (
    <GlassProvider defaultTheme={{ blur: 24, opacity: 0.15 }}>
      <YourComponents />
    </GlassProvider>
  );
}

Or use GlassStyle for scoped customization:

import { GlassStyle } from '@nishag619/glass-ui';

<GlassStyle css={{ '--glass-blur': '32px' }}>
  <Card>Heavier blur in this section</Card>
</GlassStyle>

🌗 Theming

Theme Modes

• light — Light theme
• dark — Dark theme
• system — Automatically follows OS preference

import { useTheme } from '@nishag619/glass-ui';

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

  return (
    <Button
      variant="outline"
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
    >
      {theme === 'dark' ? '☀️ Light' : '🌙 Dark'}
    </Button>
  );
}

Tailwind CSS Setup

Glass UI is built on Tailwind CSS. Make sure your project has Tailwind configured:

// tailwind.config.js
export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@nishag619/glass-ui/dist/**/*.js',
  ],
  darkMode: 'class',
  // ... rest of your config
};

🧪 Button Variants

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="glass">Glass</Button>
<Button variant="glass-primary">Glass Primary</Button>

📢 Toast Notifications

Add the Toaster to your root layout:

import { Toaster } from '@nishag619/glass-ui';

function Root() {
  return (
    <>
      <App />
      <Toaster />
    </>
  );
}

Then trigger toasts from anywhere:

import { useToast } from '@nishag619/glass-ui';

function SaveButton() {
  const { toast } = useToast();

  return (
    <Button onClick={() => toast({
      title: 'Saved!',
      description: 'Your changes have been saved.',
    })}>
      Save
    </Button>
  );
}

📖 Storybook

Explore all components interactively:

git clone https://github.com/nishag619/glass-ui.git
cd glass-ui
npm install
npm run storybook

🌐 Browser Support

| Browser | Version | |---------|---------| | Chrome / Edge | 88+ | | Firefox | 78+ | | Safari | 14+ | | iOS Safari | 14+ |

Backdrop filter support is required for glass effects. The components degrade gracefully in unsupported browsers.

🔌 API

GlassProvider

interface GlassTheme {
  opacity: number;       // 0-1, default: 0.1
  blur: number;          // px, default: 16
  saturation: number;    // %, default: 180
  borderOpacity: number; // 0-1, default: 0.2
  shadowOpacity: number; // 0-1, default: 0.1
  radius: number;        // rem, default: 1
  animate: boolean;      // default: true
}

<GlassProvider defaultTheme={{ opacity: 0.2, blur: 24 }}>
  {children}
</GlassProvider>

useGlass()

const { opacity, blur, setGlassTheme, resetTheme } = useGlass();

useGlassStyles()

const styles = useGlassStyles();
// => { background, backdropFilter, border, borderRadius, boxShadow, ... }

🤝 Contributing

Contributions are welcome! Here's how:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please ensure your code passes linting and tests before submitting.

📄 License

MIT © nishag619

Built with ❤️ using React, Tailwind CSS, and Radix UI.