yarn dlx shadcn@latest add @glass-ui/button

npm:

npx shadcn@latest add @glass-ui/button

bun:

bunx shadcn@latest add @glass-ui/button

Usage

After installation, import and use components in your project:

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function Example() {
  return (
    
      
        Click me
      
      
        
          Beautiful Card
        
        Your content here
      
    
  )
}

Note: The import path depends on your project's component directory configuration. By default, shadcn CLI installs components to @/components/ui/.

📚 Documentation

Visit the full documentation for:

• Complete component reference
• Installation guides
• Customization examples
• Theme configuration
• Glass effect customization

🎨 Interactive Playground

Explore and test components interactively with Storybook:

# Start Storybook
pnpm storybook

# Build Storybook (static)
pnpm build-storybook

Storybook provides:

• ✨ Live component previews
• 🎛️ Interactive controls for all props
• 📖 Auto-generated documentation
• ♿ Accessibility testing
• 🌓 Theme switching
• 📱 Responsive viewport testing

Visit http://localhost:6006 after starting Storybook.

🏗️ Architecture

• Base components (components/ui/) — shadcn-style components with the liquid material: variant="liquid" (default) or "default", plus material, tint, glass and webgl props.
• Glass UI components (components/ui/glass/) — the components you install; they wrap the base components and add effects such as glow, shimmer and ripple.
• Liquid glass engine (lib/liquid-glass/, components/ui/liquid/) — the WebGL renderer, LiquidGlassProvider, and the material.ts helper every component uses.

🎨 Customization

Materials

Regular liquid glass (default)
Clear glass
Tinted glass
Custom tint and frost

Global CSS Variables

:root {
  --lg-rim-hi: rgba(255, 255, 255, 0.8);
  --lg-rim-lo: rgba(255, 255, 255, 0.18);
  --lg-highlight: rgba(255, 255, 255, 0.6);
  --lg-drop: rgba(15, 23, 42, 0.14);
}
.lg-regular { --lg-base: rgba(255, 255, 255, 0.42); --lg-blur: 16px; }

See components/ui/glass/GLASS_CUSTOMIZATION.md for the full reference.

Liquid Glass (WebGL)

Wrap your app in LiquidGlassProvider and glass resting on the backdrop is drawn with real refraction, dispersion and a light-tracking rim. Everything else keeps the CSS look, as does the whole app when WebGL is unavailable or the user prefers reduced transparency. See components/ui/liquid/README.md.

📦 Available Components

Form Components

• Button, Input, Textarea, Label
• Checkbox, Switch, Radio Group
• Select, Input OTP

Display Components

• Card, Badge, Avatar, Alert
• Skeleton, Separator, Table

Overlay Components

• Dialog, Alert Dialog, Popover
• Tooltip, Hover Card, Sheet
• Drawer, Sidebar

Navigation Components

• Tabs, Accordion, Breadcrumb
• Dropdown Menu, Navigation Menu
• Pagination, Scroll Area

Data Display

• Calendar, Chart, Command
• Slider, Toggle, Toggle Group

And more! See the full component list.

🛠️ Development

Prerequisites

• Node.js 20+ (CI uses 22)
• pnpm 10

Setup

git clone https://github.com/crenspire/glass-ui.git
cd glass-ui
pnpm install

pnpm dev               # documentation site on http://localhost:3000
pnpm storybook         # Storybook on http://localhost:6006
pnpm test              # unit tests (vitest)
pnpm registry:build    # rebuild public/r/*.json from registry.json

Running pnpm build while pnpm dev is running overwrites the dev server's output; restart pnpm dev afterwards.

Project Structure

glass-ui/
├── app/                     # Documentation site (Next.js app router, static export)
│   ├── (settings)/          # Components, docs and themes pages
│   └── blocks/              # Blocks gallery
├── components/
│   ├── ui/                  # Base components (liquid material)
│   ├── ui/glass/            # Glass UI components (what users install)
│   ├── ui/liquid/           # LiquidGlassProvider and lens filter
│   ├── demos/               # One live demo + code snippet per component
│   ├── shell/ desktop/ settings/   # Site chrome: menu bar, dock, widgets, settings layout
│   └── blocks/              # Page-level blocks
├── lib/
│   ├── liquid-glass/        # WebGL engine and material helper
│   └── wallpapers/          # Generated, animated wallpapers
├── stories/                 # Storybook stories
├── public/r/                # Built registry served to `shadcn add`
└── registry.json            # Component registry

🚀 Deployment

The site is a static export hosted on GitHub Pages at glass-ui.crenspire.com.

• .github/workflows/deploy-pages.yml runs on every v* tag (and manually from the Actions tab). It tests, builds Storybook into public/storybook, runs next build (which writes out/) and publishes out/ to Pages.
• public/CNAME keeps the custom domain; DNS has a CNAME record glass-ui → crenspire.github.io.
• The registry (/r/*.json) and Storybook (/storybook) are served from the same site, so pnpm dlx shadcn@latest add @glass-ui/ keeps working.

To release:

git checkout -b release/x.y.z develop
# bump "version" in package.json, update CHANGELOG.md
git tag -a vx.y.z -m "Glass UI x.y.z"
git push origin release/x.y.z vx.y.z   # the tag triggers the Pages deploy

Preview the production build locally:

pnpm build-storybook && pnpm export-storybook && pnpm build
pnpm start            # serves out/ on http://localhost:3000

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

📄 License

This project is licensed under the MIT License.

🔗 Links

• Documentation
• GitHub Repository
• Issue Tracker

🙏 Acknowledgments

• Built with shadcn/ui
• Powered by Radix UI
• Inspired by Apple's design language

Made with ❤️ by Crenspire Technologies

Read the rest on GitHub →

Browse every shadcn registry we track →