Getting Started

1. Initialize your project

Make sure you have a Next.js project set up with Tailwind CSS configured.

2. Install components

Use the shadcn CLI to add components from the Glass UI registry with your preferred package manager:

pnpm dlx shadcn@latest add @crenspire/button

3. Start building

Import and use components in your application. All components default to glass variants.

What is MCP?

MCP allows AI assistants to access and use Glass UI components directly. This enables seamless integration with tools like Claude, ChatGPT, and other MCP-compatible assistants.

Setup Instructions

Add the following configuration to your MCP settings file (usually ~/.config/mcp.json or similar):

{
  "mcpServers": {
    "crenspire-glass": {
      "command": "npx",
      "args": [
        "-y",
        "@shadcn/mcp-server",
        "--registry",
        "https://glass-ui.crenspire.com/r/registry.json"
      ]
    }
  }
}

Usage

Once configured, you can ask your AI assistant to add Glass UI components to your project, and it will automatically use the correct registry URL and component paths.

Global CSS Variables

All Glass UI components automatically use CSS variables for glass effects. You can override these in your global CSS file to change the appearance of all components at once. Changes take effect immediately.

/* In your globals.css or main CSS file */
:root {
  /* Glass background transparency (0-1) */
  --glass-bg: rgba(255, 255, 255, 0.25);
  
  /* Glass border color and opacity */
  --glass-border: rgba(255, 255, 255, 0.18);
  
  /* Blur amount - Apple standard is 30px */
  --blur: 30px;
  --blur-sm: 15px;  /* Small blur for subtle effects */
  --blur-lg: 50px;  /* Large blur for strong effects */
  
  /* Glass shadows */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  --glass-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Dark mode overrides */
.dark {
  /* More transparent for dark backgrounds */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  
  /* Same blur values work for both modes */
  --blur: 30px;
  --blur-sm: 15px;
  --blur-lg: 50px;
  
  /* Deeper shadows for dark mode */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
  --glass-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
  --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.15);
}

Example: Custom Transparency & Blur

Here's an example of customizing the glass effect to be more or less transparent with different blur amounts:

/* More transparent, stronger blur */
:root {
  --glass-bg: rgba(255, 255, 255, 0.15);  /* 15% opacity - more transparent */
  --blur: 40px;                            /* Stronger blur */
}

.dark {
  --glass-bg: rgba(255, 255, 255, 0.08);  /* 8% opacity for dark mode */
  --blur: 40px;
}

/* Less transparent, subtle blur */
:root {
  --glass-bg: rgba(255, 255, 255, 0.4);   /* 40% opacity - less transparent */
  --blur: 20px;                            /* Subtle blur */
}

.dark {
  --glass-bg: rgba(255, 255, 255, 0.15);  /* 15% opacity for dark mode */
  --blur: 20px;
}

How It Works

All Glass UI components with glass variants automatically use these CSS variables:

• Components read --glass-bg for background color
• Components use backdrop-blur-[var(--blur)] for blur effect
• Borders use --glass-border for color
• Shadows use --glass-shadow variables

When you change these variables, all components with glass effects will automatically update without needing to modify individual component code.

Per-Component Customization

You can also customize glass effects for individual components using the glass prop:

import { Card, CardHeader, CardTitle, CardContent } from "@/registry/ui/card"

export function CustomGlassCard() {
  return (
    <Card
      variant="glass"
      glass={{
        color: "rgba(139, 92, 246, 0.2)",  // Purple tint
        blur: 40,                            // 40px blur
        transparency: 0.3,                   // 30% opacity
        outline: "rgba(139, 92, 246, 0.5)",  // Purple border
      }}
    >
      <CardHeader>
        <CardTitle>Custom Glass Card</CardTitle>
      </CardHeader>
      <CardContent>
        This card has custom glass properties that override the global defaults.
      </CardContent>
    </Card>
  )
}

Apple Standards

Glass UI uses Apple's glassmorphism standards by default:

• Light Mode: 25% opacity, 30px blur
• Dark Mode: 10% opacity, 30px blur
• Subtle borders and shadows for depth
• Consistent blur values across all components

You can adjust these values to match your design needs while maintaining the glass aesthetic.