Getting started

Get up and running with Glass UI in minutes.

Installation

Install Glass UI components using the shadcn CLI

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 @glass-ui/button

3. Start building

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

MCP (Model Context Protocol) Setup

Configure MCP to use Glass UI components with AI assistants

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.

Basic Usage

Example of using Glass UI components

Glass Card

This is a card with glass effect

Card content goes here