Glass UI

A modern, glassmorphic component library inspired by Apple's design language, built with Next.js 16, React 19, and shadcn-ui registry.

Glass UI
Next.js
React
TypeScript

āœØ Features

  • 40+ Glass Components - Comprehensive collection of beautiful, glassy UI components
  • Apple-Inspired Design - Glassmorphism effects following Apple's design standards
  • Theme Support - Built-in light/dark mode with automatic theme switching
  • Enhanced Effects - Glow, shimmer, ripple, and gradient animations
  • Fully Customizable - Per-component glass effect customization
  • Package Manager Support - Install with pnpm, yarn, npm, or bun
  • TypeScript - Fully typed components for better developer experience
  • Accessible - Built on Radix UI primitives for accessibility
  • Tailwind CSS - Utility-first styling with CSS variables

šŸš€ Quick Start

Installation

Install components using the shadcn CLI with your preferred package manager:

pnpm:

bash
pnpm dlx shadcn@latest add @glass-ui/button

yarn:

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

npm:

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

bun:

bash
bunx shadcn@latest add @glass-ui/button

Usage

After installation, import and use components in your project:

tsx
import { Button } from "@/components/ui/button"import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
export function Example() {  return (    <div>      <Button variant="glass" effect="glow">        Click me      </Button>      <Card variant="glass" gradient animated>        <CardHeader>          <CardTitle>Beautiful Card</CardTitle>        </CardHeader>        <CardContent>Your content here</CardContent>      </Card>    </div>  )}

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

šŸ“š Documentation

Visit the for:

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

šŸŽØ Interactive Playground

Explore and test components interactively with Storybook:

bash
# Start Storybookpnpm 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

Glass UI follows a two-layer component architecture:

Base Components (registry/ui/)

Foundation components with glassy variants providing:

  • Core functionality
  • Glassy effect variants
  • Accessibility features (Radix UI)
  • TypeScript support

Glass UI Components (registry/ui/glass/)

Enhanced components built on top of base components with:

  • Enhanced visual effects (glow, shimmer, ripple)
  • Advanced styling options
  • Gradient and animation support
  • Custom design patterns

šŸŽØ Customization

Global CSS Variables

Customize glass effects globally using CSS variables:

css
:root {  --glass-bg: rgba(255, 255, 255, 0.25);  --glass-border: rgba(255, 255, 255, 0.18);  --blur: 30px;  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);}
.dark {  --glass-bg: rgba(255, 255, 255, 0.1);  --glass-border: rgba(255, 255, 255, 0.2);}

Per-Component Customization

tsx
<Card  variant="glass"  glass={{    color: "rgba(139, 92, 246, 0.2)",    blur: 30,    transparency: 0.3,    outline: "rgba(139, 92, 246, 0.5)"  }}>  Content</Card>

šŸ“¦ 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 .

šŸ› ļø Development

Prerequisites

  • Node.js 18+
  • pnpm, yarn, npm, or bun

Setup

bash
# Clone the repositorygit clone https://github.com/crenspire/glass-ui.gitcd glass-ui
# Install dependenciespnpm install
# Start development serverpnpm dev
# Start Storybook (interactive playground)pnpm storybook
# Build the projectpnpm build
# Build the registrypnpm registry:build

Project Structure

glass-ui/ā”œā”€ā”€ app/                    # Next.js app directoryā”œā”€ā”€ components/             # Shared componentsā”œā”€ā”€ lib/                    # Utilities and helpersā”œā”€ā”€ public/                 # Static assetsā”œā”€ā”€ registry/ā”‚   ā”œā”€ā”€ ui/                # Base componentsā”‚   ā””ā”€ā”€ ui/glass/          # Glass UI componentsā”œā”€ā”€ stories/               # Storybook storiesā””ā”€ā”€ registry.json          # Component registry

šŸš€ Deployment

Deploy to Vercel

Deploy both the documentation site and Storybook to Vercel:

Quick Start:

  1. Deploy main site: Import your repo at
  2. Deploy Storybook: Import the same repo again with these settings:
    • Build Command: pnpm build-storybook
    • Output Directory: storybook-static
  3. Set environment variable NEXT_PUBLIC_STORYBOOK_URL in main site
  4. Redeploy main site

Detailed Instructions:

  • See for full deployment guide
  • See for quick reference

Build Commands

bash
# Build main sitepnpm build
# Build Storybookpnpm build-storybook
# Test builds locallypnpm start  # Serves main site on http://localhost:3000npx http-server storybook-static  # Serves Storybook on http://localhost:8080

šŸ¤ Contributing

We welcome contributions! Please see for guidelines.

šŸ“„ License

This project is licensed under the MIT License.

šŸ”— Links

šŸ™ Acknowledgments

  • Built with
  • Powered by
  • Inspired by Apple's design language

Made with ā¤ļø by