### Install Dependencies with pnpm

Source: https://github.com/crenspire/glass-ui/blob/develop/CONTRIBUTING.md

Install all project dependencies using pnpm. Ensure you have pnpm installed and configured.

```bash
pnpm install
```

--------------------------------

### Install Glass UI Button with bun

Source: https://github.com/crenspire/glass-ui/blob/develop/README.md

Use this command to install the Glass UI button component using bun. Ensure you have bun installed and configured.

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

--------------------------------

### Install Glass UI Button with npm

Source: https://github.com/crenspire/glass-ui/blob/develop/README.md

Use this command to install the Glass UI button component using npm. Ensure you have npm installed and configured.

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

--------------------------------

### Start Development Server

Source: https://github.com/crenspire/glass-ui/blob/develop/CONTRIBUTING.md

Run the development server to preview the UI and test components locally. Access the site at http://localhost:3000.

```bash
pnpm dev
```

--------------------------------

### Run Storybook Locally

Source: https://github.com/crenspire/glass-ui/blob/develop/stories/README.md

Use this command to start the Storybook development server. Storybook will be accessible at http://localhost:6006.

```bash
pnpm storybook
```

--------------------------------

### Install Glass UI Button with pnpm

Source: https://github.com/crenspire/glass-ui/blob/develop/README.md

Use this command to install the Glass UI button component using pnpm. Ensure you have pnpm installed and configured.

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

--------------------------------

### Install Glass UI Button with shadcn CLI

Source: https://context7.com/crenspire/glass-ui/llms.txt

Install the Glass UI Button component using the shadcn CLI with your preferred package manager.

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

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

```bash
# npm
npx shadcn@latest add @glass-ui/button
```

```bash
# bun
bunx shadcn@latest add @glass-ui/button
```

--------------------------------

### Install Glass UI Button with yarn

Source: https://github.com/crenspire/glass-ui/blob/develop/README.md

Use this command to install the Glass UI button component using yarn. Ensure you have yarn installed and configured.

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

--------------------------------

### Clone Glass UI Repository

Source: https://github.com/crenspire/glass-ui/blob/develop/CONTRIBUTING.md

Clone your forked repository to start development. Navigate into the project directory after cloning.

```bash
git clone https://github.com/your-username/glass-ui.git
cd glass-ui
```

--------------------------------

### Custom Glass Properties Example

Source: https://github.com/crenspire/glass-ui/blob/develop/stories/README.md

This example demonstrates how to apply custom glass properties to a component for fine-tuned visual effects. It accepts properties like color, blur, outline, and inner glow.

```tsx
glass={
  color: "rgba(139, 92, 246, 0.15)",
  blur: 25,
  outline: "rgba(139, 92, 246, 0.4)",
  innerGlow: "rgba(255, 255, 255, 0.2)",
  innerGlowBlur: 20
}
```

--------------------------------

### Glass UI Button Examples

Source: https://context7.com/crenspire/glass-ui/llms.txt

Demonstrates various Glass UI Button components with different effects and custom glass styling. Ensure the Button component is imported from '@/components/ui/glass/button'.

```tsx
import { Button } from "@/components/ui/glass/button"

// Basic glass button with default glow effect
<Button>Click me</Button>
```

```tsx
// Button with shimmer effect
<Button effect="shimmer">Shimmer Effect</Button>
```

```tsx
// Button with ripple effect
<Button effect="ripple">Ripple Effect</Button>
```

```tsx
// Button with lift effect (rises on hover)
<Button effect="lift">Lift Effect</Button>
```

```tsx
// Button with scale effect
<Button effect="scale">Scale Effect</Button>
```

```tsx
// Custom glass styling
<Button
  glass={{
    color: "rgba(59, 130, 246, 0.2)",
    blur: 25,
    transparency: 0.3,
    outline: "rgba(59, 130, 246, 0.4)",
    innerGlow: "rgba(255, 255, 255, 0.2)",
    innerGlowBlur: 15
  }}>
  Custom Glass Button
</Button>
```

```tsx
// Different variants
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
```

--------------------------------

### Custom Glass Button Example

Source: https://context7.com/crenspire/glass-ui/llms.txt

Applies glass customization to a Button component, focusing on color, blur, and outline for a blue theme.

```tsx
// Example: Blue themed button
<Button
  glass={{
    color: "rgba(59, 130, 246, 0.25)",
    blur: 20,
    outline: "rgba(59, 130, 246, 0.4)"
  }}
>
  Blue Glass Button
</Button>
```

--------------------------------

### Switch Component Examples

Source: https://context7.com/crenspire/glass-ui/llms.txt

Provides a toggle switch with glassmorphism styling. Supports a glow effect on the active state and can be disabled.

```tsx
import { Switch } from "@/components/ui/glass/switch"
import { Label } from "@/components/ui/glass/label"

// Basic glass switch
<div className="flex items-center space-x-2">
  <Switch id="airplane-mode" />
  <Label htmlFor="airplane-mode">Airplane Mode</Label>
</div>
```

```tsx
// Switch with glow effect
<div className="flex items-center space-x-2">
  <Switch id="notifications" glow />
  <Label htmlFor="notifications">Enable Notifications</Label>
</div>
```

```tsx
// Disabled switch
<div className="flex items-center space-x-2">
  <Switch id="disabled" disabled />
  <Label htmlFor="disabled">Disabled</Label>
</div>
```

--------------------------------

### Glass UI Card Component Examples

Source: https://context7.com/crenspire/glass-ui/llms.txt

Showcases various Glass UI Card components with different variants, gradients, animations, and custom glass properties. Ensure Card and its sub-components are imported from '@/components/ui/glass/card'.

```tsx
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/glass/card"

// Standard glass card (default)
<Card variant="glass">
  <CardHeader>
    <CardTitle>Glass Card</CardTitle>
    <CardDescription>Standard glassmorphism effect</CardDescription>
  </CardHeader>
  <CardContent>Your content here</CardContent>
  <CardFooter>Footer content</CardFooter>
</Card>
```

```tsx
// Frosted glass - enhanced blur and opacity
<Card variant="frosted">
  <CardHeader>
    <CardTitle>Frosted Glass</CardTitle>
  </CardHeader>
  <CardContent>Enhanced blur effect</CardContent>
</Card>
```

```tsx
// Fluted glass - vertical ridges texture
<Card variant="fluted">
  <CardHeader>
    <CardTitle>Fluted Glass</CardTitle>
  </CardHeader>
  <CardContent>Textured glass effect</CardContent>
</Card>
```

```tsx
// Crystal glass - clear with highlights and glow
<Card variant="crystal">
  <CardHeader>
    <CardTitle>Crystal Glass</CardTitle>
  </CardHeader>
  <CardContent>Clear glass with glow</CardContent>
</Card>
```

```tsx
// Card with gradient and animation
<Card variant="glass" gradient animated>
  <CardHeader>
    <CardTitle>Animated Card</CardTitle>
  </CardHeader>
  <CardContent>Scales on hover with gradient background</CardContent>
</Card>
```

```tsx
// Card with hover effects
<Card variant="glass" hover="glow">
  <CardContent>Glows on hover</CardContent>
</Card>
```

```tsx
// Fully customized glass card
<Card
  variant="glass"
  gradient
  animated
  hover="lift"
  glass={{
    color: "rgba(139, 92, 246, 0.2)",
    blur: 30,
    transparency: 0.3,
    outline: "rgba(139, 92, 246, 0.5)",
    innerGlow: "rgba(255, 255, 255, 0.3)",
    innerGlowBlur: 25,
    shadow: "0 8px 32px rgba(139, 92, 246, 0.2)"
  }}>
  <CardHeader>
    <CardTitle>Custom Purple Card</CardTitle>
  </CardHeader>
  <CardContent>Fully customized glass properties</CardContent>
</Card>
```

--------------------------------

### Basic Glass Input

Source: https://context7.com/crenspire/glass-ui/llms.txt

A simple input field with glassmorphism styling. No special setup is required beyond importing the Input component.

```tsx
import { Input } from "@/components/ui/glass/input"

<Input placeholder="Enter text..." />
```

--------------------------------

### Alert Component Examples

Source: https://context7.com/crenspire/glass-ui/llms.txt

Displays important messages with glassmorphism styling. Can include icons, titles, descriptions, and configurable hover effects.

```tsx
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/glass/alert"
import { AlertCircle, CheckCircle, Info } from "lucide-react"

// Basic glass alert
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You have new notifications to review.</AlertDescription>
</Alert>
```

```tsx
// Alert with icon and glow
<Alert glow hover="glow">
  <Info className="h-4 w-4" />
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>This is an informational message.</AlertDescription>
</Alert>
```

```tsx
// Success alert
<Alert variant="glass" glow>
  <CheckCircle className="h-4 w-4 text-green-500" />
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>
```

```tsx
// Destructive alert
<Alert variant="destructive">
  <AlertCircle className="h-4 w-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Something went wrong. Please try again.</AlertDescription>
</Alert>
```

--------------------------------

### Usage of Glass UI Button and Card Components

Source: https://github.com/crenspire/glass-ui/blob/develop/README.md

Example of importing and using the Glass UI Button and Card components in a React component. Note that the import path may vary based on your project's configuration.

```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>
  )
}
```

--------------------------------

### Custom Glass Card Example

Source: https://context7.com/crenspire/glass-ui/llms.txt

Applies extensive glass customization to a Card component, including color, transparency, blur, outline, shadow, and inner glow.

```tsx
// Example: Purple themed glass card
<Card
  glass={{
    color: "rgba(139, 92, 246, 0.2)",
    transparency: 0.3,
    blur: 30,
    outline: "rgba(139, 92, 246, 0.5)",
    outlineWidth: 2,
    shadow: "0 8px 32px rgba(139, 92, 246, 0.2)",
    innerGlow: "rgba(255, 255, 255, 0.3)",
    innerGlowBlur: 25
  }}
>
  Custom purple glass card
</Card>
```

--------------------------------

### Per-Component Glass Effect Customization

Source: https://github.com/crenspire/glass-ui/blob/develop/README.md

Example of customizing the glass effect properties for a specific Card component using the `glass` prop. Allows fine-grained control over color, blur, transparency, and outline.

```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>
```

--------------------------------

### Build Commands for Glass UI

Source: https://github.com/crenspire/glass-ui/blob/develop/README.md

Commands to build the main site and Storybook, and to test builds locally. Use `pnpm build` for the main site and `pnpm build-storybook` for Storybook.

```bash
# Build main site
pnpm build

# Build Storybook
pnpm build-storybook

# Test builds locally
pnpm start  # Serves main site on http://localhost:3000
npx http-server storybook-static  # Serves Storybook on http://localhost:8080
```

--------------------------------

### Import and Use Glass UI Components

Source: https://github.com/crenspire/glass-ui/blob/develop/components/ui/glass/README.md

Demonstrates how to import and use Glass UI components like Button and Card. Ensure base components are imported from the parent directory.

```tsx
import { Button, Card, Input, CardHeader, CardTitle } from "@/components/ui/glass"

// Use Glass UI components
<Button effect="glow" variant="glass">
  Click me
</Button>

<Card gradient animated>
  <CardHeader>
    <CardTitle>Beautiful Card</CardTitle>
  </CardHeader>
</Card>
```

--------------------------------

### Build Glass UI Project

Source: https://github.com/crenspire/glass-ui/blob/develop/README.md

Command to build the Glass UI project for production. This compiles and optimizes the code.

```bash
pnpm build
```

--------------------------------

### Build Static Storybook

Source: https://github.com/crenspire/glass-ui/blob/develop/stories/README.md

Command to build a static version of the Storybook for deployment. The output will be placed in the `storybook-static/` directory.

```bash
pnpm build-storybook
```

--------------------------------

### Build Glass UI Registry

Source: https://github.com/crenspire/glass-ui/blob/develop/README.md

Command to build the Glass UI component registry. This is typically part of the build process for the library.

```bash
pnpm registry:build
```

--------------------------------

### Stage and Commit Changes

Source: https://github.com/crenspire/glass-ui/blob/develop/CONTRIBUTING.md

Stage all changes and commit them with a conventional commit message. Use prefixes like 'feat:', 'fix:', 'docs:' etc.

```bash
git add .
git commit -m "feat: add your feature description"
```

--------------------------------

### Create Feature Branch

Source: https://github.com/crenspire/glass-ui/blob/develop/CONTRIBUTING.md

Create a new branch for your feature development. Use a descriptive name for the branch.

```bash
git checkout -b feature/your-feature-name
```

--------------------------------

### Basic Glass Dialog

Source: https://context7.com/crenspire/glass-ui/llms.txt

A standard modal dialog with glassmorphism effects. Requires importing multiple dialog parts and a trigger button.

```tsx
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/glass/dialog"
import { Button } from "@/components/ui/glass/button"

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Glass Dialog</DialogTitle>
      <DialogDescription>
        This is a glassmorphic dialog with backdrop blur.
      </DialogDescription>
    </DialogHeader>
    <div className="py-4">
      Dialog content goes here.
    </div>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

--------------------------------

### Basic Dropdown Menu Component

Source: https://context7.com/crenspire/glass-ui/llms.txt

Implements a standard dropdown menu with account-related options. Requires importing DropdownMenu and related components.

```tsx
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/glass/dropdown-menu"
import { Button } from "@/components/ui/glass/button"

// Basic glass dropdown
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

--------------------------------

### Basic Drawer Component

Source: https://context7.com/crenspire/glass-ui/llms.txt

A fundamental drawer component with header, description, content, and footer sections. Requires importing Drawer and related components.

```tsx
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/glass/drawer"
import { Button } from "@/components/ui/glass/button"

// Basic glass drawer
<Drawer>
  <DrawerTrigger asChild>
    <Button>Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Glass Drawer</DrawerTitle>
      <DrawerDescription>This is a glassmorphic drawer panel.</DrawerDescription>
    </DrawerHeader>
    <div className="p-4">
      Drawer content goes here.
    </div>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```

--------------------------------

### Basic Glass Spinner

Source: https://context7.com/crenspire/glass-ui/llms.txt

A fundamental loading indicator with glassmorphism styling. Requires the Spinner import.

```tsx
import { Spinner } from "@/components/ui/glass/spinner"

// Basic glass spinner
<Spinner />
```

--------------------------------

### Glass Spinner with Different Sizes

Source: https://context7.com/crenspire/glass-ui/llms.txt

Demonstrates the use of the 'size' prop to control the dimensions of the Spinner component.

```tsx
import { Spinner } from "@/components/ui/glass/spinner"

// Spinner with different sizes
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
```

--------------------------------

### Create Base Component Structure

Source: https://github.com/crenspire/glass-ui/blob/develop/CONTRIBUTING.md

Defines the basic structure for a UI component, including props, variant handling, and conditional styling. Supports glass effects and glow.

```tsx
"use client"

import * as React from "react"
import { BaseComponent as BaseComponent } from "@/components/ui/base-component"
import { cn } from "@/lib/utils"
import type { GlassCustomization } from "@/lib/glass-utils"

export interface ComponentProps extends React.ComponentProps<typeof BaseComponent> {
  // Additional props
  glow?: boolean
  glass?: GlassCustomization
}

export const Component = React.forwardRef<HTMLDivElement, ComponentProps>(
  ({ className, variant = "glass", glow = false, glass, ...props }, ref) => {
    return (
      <BaseComponent
        ref={ref}
        variant={variant}
        glass={glass}
        className={cn(
          glow && "shadow-lg shadow-purple-500/30",
          className
        )}
        {...props}
      />
    )
  }
)
Component.displayName = "Component"
```

--------------------------------

### Define GlassCustomization Interface

Source: https://github.com/crenspire/glass-ui/blob/develop/components/ui/glass/GLASS_CUSTOMIZATION.md

Defines the structure for customizing glassmorphism effects, including color, transparency, blur, outline, and shadow properties.

```typescript
interface GlassCustomization {
  /**
   * Background color for the glass effect (e.g., "rgba(255, 255, 255, 0.1)" or "#ffffff")
   * Default: uses CSS variable --glass-bg
   */
  color?: string
  
  /**
   * Transparency/opacity for the background (0-1)
   * If provided, will override the alpha channel in color
   */
  transparency?: number
  
  /**
   * Blur amount in pixels
   * Default: uses CSS variable --blur (20px)
   */
  blur?: number | string
  
  /**
   * Border/outline color (e.g., "rgba(255, 255, 255, 0.25)" or "#ffffff")
   * Default: uses CSS variable --glass-border
   */
  outline?: string
  
  /**
   * Border/outline width in pixels
   * Default: 1px
   */
  outlineWidth?: number | string
  
  /**
   * Shadow for the glass effect
   * Default: uses CSS variable --glass-shadow
   */
  shadow?: string
}
```

--------------------------------

### Glass Input with Icon

Source: https://context7.com/crenspire/glass-ui/llms.txt

Enhance input fields with icons for better user guidance. Supports various icons from libraries like lucide-react.

```tsx
import { Input } from "@/components/ui/glass/input"
import { Search, Mail, Lock } from "lucide-react"

<Input icon={<Search className="h-4 w-4" />} placeholder="Search..." />

<Input icon={<Mail className="h-4 w-4" />} type="email" placeholder="Email address" />

<Input icon={<Lock className="h-4 w-4" />} type="password" placeholder="Password" />
```

--------------------------------

### Basic Glass Tabs

Source: https://context7.com/crenspire/glass-ui/llms.txt

A tabbed interface component featuring glassmorphism styling for tabs and content panels.

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/glass/tabs"

<Tabs defaultValue="tab1" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="tab1">Account</TabsTrigger>
    <TabsTrigger value="tab2">Settings</TabsTrigger>
    <TabsTrigger value="tab3">Notifications</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Account settings content</TabsContent>
  <TabsContent value="tab2">Settings content</TabsContent>
  <TabsContent value="tab3">Notifications content</TabsContent>
</Tabs>
```

--------------------------------

### Basic Glass Popover

Source: https://context7.com/crenspire/glass-ui/llms.txt

A standard popover component with glassmorphism styling. Requires Popover, PopoverContent, and PopoverTrigger imports.

```tsx
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/glass/popover"
import { Button } from "@/components/ui/glass/button"

// Basic glass popover
<Popover>
  <PopoverTrigger asChild>
    <Button>Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="space-y-2">
      <h4 className="font-medium">Glass Popover</h4>
      <p className="text-sm text-muted-foreground">
        This is a glassmorphic popover with backdrop blur.
      </p>
    </div>
  </PopoverContent>
</Popover>
```

--------------------------------

### GlassCustomization Interface Definition

Source: https://context7.com/crenspire/glass-ui/llms.txt

Defines the GlassCustomization interface for per-component styling of glass effects. Properties include color, transparency, blur, outline, shadow, and inner glow.

```typescript
import type { GlassCustomization } from "@/lib/glass-utils"

// GlassCustomization interface properties
interface GlassCustomization {
  color?: string          // Background color (e.g., "rgba(255, 255, 255, 0.1)")
  transparency?: number   // Opacity 0-1 (overrides alpha in color)
  blur?: number | string  // Blur amount in pixels (default: CSS variable --blur)
  outline?: string        // Border color (e.g., "rgba(255, 255, 255, 0.25)")
  outlineWidth?: number | string  // Border width (default: 1px)
  shadow?: string         // Box shadow value
  innerGlow?: string      // Inner glow color for inset shadow effect
  innerGlowBlur?: number | string  // Inner glow blur radius (default: 20px)
}

```

--------------------------------

### Glass Input with Hover Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

Apply visual feedback on hover using the `hover` prop. The 'glow' effect adds a subtle highlight.

```tsx
import { Input } from "@/components/ui/glass/input"

<Input hover="glow" placeholder="Glows on hover" />
```

--------------------------------

### Glass Tabs with Glow and Hover Effects

Source: https://context7.com/crenspire/glass-ui/llms.txt

Customize tabs with 'glow' effects on the list and 'lift' hover effect on triggers for interactive elements.

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/glass/tabs"

<Tabs defaultValue="overview">
  <TabsList glow hover="lift">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="reports">Reports</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Overview panel</TabsContent>
  <TabsContent value="analytics">Analytics panel</TabsContent>
  <TabsContent value="reports">Reports panel</TabsContent>
</Tabs>
```

--------------------------------

### Basic Glass Select

Source: https://context7.com/crenspire/glass-ui/llms.txt

A dropdown select component with glassmorphism styling on both the trigger and content areas.

```tsx
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/glass/select"

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>
```

--------------------------------

### Global Glass Customization CSS Variables

Source: https://context7.com/crenspire/glass-ui/llms.txt

Defines CSS variables for globally customizing standard, large shadow, frosted, and crystal glass effects. Includes dark mode overrides.

```css
:root {
  /* Standard glass effect */
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --blur: 20px;

  /* Large shadow for emphasis */
  --glass-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
  --blur-lg: 30px;

  /* Frosted glass variant */
  --glass-frosted-bg: rgba(255, 255, 255, 0.35);
  --glass-frosted-border: rgba(255, 255, 255, 0.3);
  --blur-frosted: 25px;

  /* Crystal glass variant */
  --glass-crystal-bg: rgba(255, 255, 255, 0.3);
  --glass-crystal-border: rgba(255, 255, 255, 0.3);
  --blur-crystal: 2px;
}

.dark {
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
```

--------------------------------

### Custom Styled Glass Input

Source: https://context7.com/crenspire/glass-ui/llms.txt

Customize the glassmorphism appearance by providing specific color, blur, and outline values via the `glass` prop.

```tsx
import { Input } from "@/components/ui/glass/input"

<Input
  glass={{
    color: "rgba(255, 255, 255, 0.15)",
    blur: 15,
    outline: "rgba(255, 255, 255, 0.3)"
  }}
  placeholder="Custom glass input" />
```

--------------------------------

### Basic Calendar Component

Source: https://context7.com/crenspire/glass-ui/llms.txt

A single-date selection calendar with glassmorphism styling. Requires the useState hook for managing the selected date.

```tsx
import { Calendar } from "@/components/ui/glass/calendar"
import { useState } from "react"

// Basic glass calendar
function CalendarExample() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md"
    />
  )
}
```

--------------------------------

### Basic Glass Slider

Source: https://context7.com/crenspire/glass-ui/llms.txt

A simple slider component with glassmorphism styling. Requires the Slider import. The default value is set to [50].

```tsx
import { Slider } from "@/components/ui/glass/slider"

// Basic glass slider
<Slider defaultValue={[50]} max={100} step={1} className="w-[300px]" />
```

--------------------------------

### Push Changes to Fork

Source: https://github.com/crenspire/glass-ui/blob/develop/CONTRIBUTING.md

Push your committed changes to your forked repository on GitHub. This makes your changes available for a pull request.

```bash
git push origin feature/your-feature-name
```

--------------------------------

### Custom Styled Glass Dialog

Source: https://context7.com/crenspire/glass-ui/llms.txt

Apply custom glassmorphism properties to a dialog using the `variant` and `glass` props for unique styling.

```tsx
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/glass/dialog"
import { Button } from "@/components/ui/glass/button"

<Dialog>
  <DialogTrigger asChild>
    <Button>Custom Dialog</Button>
  </DialogTrigger>
  <DialogContent
    variant="frosted"
    glass={{
      color: "rgba(139, 92, 246, 0.15)",
      blur: 40,
      outline: "rgba(139, 92, 246, 0.3)"
    }}>
    <DialogHeader>
      <DialogTitle>Purple Frosted Dialog</DialogTitle>
    </DialogHeader>
    <DialogDescription>Custom styled dialog content</DialogDescription>
  </DialogContent>
</Dialog>
```

--------------------------------

### Tooltip Component Variations

Source: https://context7.com/crenspire/glass-ui/llms.txt

Displays helpful information on hover with glassmorphism styling. Supports a glow effect for enhanced visibility.

```tsx
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/glass/tooltip"
import { Button } from "@/components/ui/glass/button"

// Basic glass tooltip
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button>Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>This is a glass tooltip</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>
```

```tsx
// Tooltip with glow
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button>Glowing tooltip</Button>
    </TooltipTrigger>
    <TooltipContent glow>
      <p>Tooltip with purple glow effect</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>
```

--------------------------------

### Add New Story Template

Source: https://github.com/crenspire/glass-ui/blob/develop/stories/README.md

Template for adding a new component story to Storybook. It includes necessary imports, meta configuration, and a default story export.

```tsx
// stories/ComponentName.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { ComponentName } from '@/components/ui/glass/component-name';

const meta = {
  title: 'Glass UI/ComponentName',
  component: ComponentName,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof ComponentName>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    // your props here
  },
};
```

--------------------------------

### Global CSS Variables for Glass UI Customization

Source: https://github.com/crenspire/glass-ui/blob/develop/README.md

Defines global CSS variables to customize the glass effect properties such as background, border, blur, and shadow. Includes dark mode variations.

```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);
}
```

--------------------------------

### Drawer with Glow Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

A drawer component that includes a glow effect. The 'glow' prop is applied to the DrawerContent.

```tsx
<Drawer>
  <DrawerTrigger asChild>
    <Button>Glowing Drawer</Button>
  </DrawerTrigger>
  <DrawerContent glow>
    <DrawerHeader>
      <DrawerTitle>Glowing Panel</DrawerTitle>
    </DrawerHeader>
  </DrawerContent>
</Drawer>
```

--------------------------------

### Calendar with Date Range Selection

Source: https://context7.com/crenspire/glass-ui/llms.txt

A calendar configured for selecting a range of dates. Uses useState to manage the 'from' and 'to' dates.

```tsx
function DateRangeCalendar() {
  const [dateRange, setDateRange] = useState({
    from: undefined,
    to: undefined,
  })

  return (
    <Calendar
      mode="range"
      selected={dateRange}
      onSelect={setDateRange}
    />
  )
}
```

--------------------------------

### Basic Accordion Component

Source: https://context7.com/crenspire/glass-ui/llms.txt

A standard collapsible accordion component with three items. Ensure Accordion and related components are imported.

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/glass/accordion"

// Basic glass accordion
<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Glass UI?</AccordionTrigger>
    <AccordionContent>
      Glass UI is a modern component library with glassmorphism effects.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>How do I install it?</AccordionTrigger>
    <AccordionContent>
      Use the shadcn CLI: npx shadcn@latest add @glass-ui/button
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes, all components are built on Radix UI primitives for accessibility.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

--------------------------------

### Apply Glass Variant to Base Components

Source: https://github.com/crenspire/glass-ui/blob/develop/components/ui/glass/GLASS_CUSTOMIZATION.md

Applies the 'glass' variant to base Card, Button, and Input components, customizing their appearance with glassmorphism properties.

```tsx
import { Card, Button, Input } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

<Card 
  variant="glass"
  glass={{
    color: "rgba(255, 255, 255, 0.1)",
    blur: 25,
    outline: "rgba(255, 255, 255, 0.25)"
  }}
>
  Content
</Card>

<Button 
  variant="glass"
  glass={{
    blur: 30,
    transparency: 0.2
  }}
>
  Button
</Button>

<Input 
  variant="glass"
  glass={{
    color: "#ffffff",
    transparency: 0.15,
    blur: 15
  }}
/>
```

--------------------------------

### Glass Select with Glow Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

Apply a 'glow' effect to the select trigger and content for enhanced visual feedback.

```tsx
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/glass/select"

<Select>
  <SelectTrigger glow className="w-[200px]">
    <SelectValue placeholder="Select with glow" />
  </SelectTrigger>
  <SelectContent glow>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="cherry">Cherry</SelectItem>
  </SelectContent>
</Select>
```

--------------------------------

### Custom Glass Spinner

Source: https://context7.com/crenspire/glass-ui/llms.txt

Allows for detailed customization of the spinner's glass effect, including color, transparency, and blur, via the 'glass' prop.

```tsx
import { Spinner } from "@/components/ui/glass/spinner"

// Custom glass spinner
<Spinner
  glass={{
    color: "rgba(139, 92, 246, 0.3)",
    blur: 10
  }}
/>
```

--------------------------------

### Apply Subtle Glass Effect to Input

Source: https://github.com/crenspire/glass-ui/blob/develop/components/ui/glass/GLASS_CUSTOMIZATION.md

Applies a subtle white glass effect to an Input component, adjusting color, blur, outline, and transparency.

```tsx
import { Input } from "@/components/ui/glass"

<Input 
  glass={{
    color: "rgba(255, 255, 255, 0.15)", // Light white
    blur: 15,                           // Subtle blur
    outline: "rgba(255, 255, 255, 0.3)", // Light border
    transparency: 0.2                    // 20% opacity
  }}
  placeholder="Enter your email..."
/>
```

--------------------------------

### Apply Strong Glass Effect to Dialog Content

Source: https://github.com/crenspire/glass-ui/blob/develop/components/ui/glass/GLASS_CUSTOMIZATION.md

Applies a strong purple glass effect to DialogContent, customizing color, blur, outline, and shadow.

```tsx
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/glass"

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogContent 
    glass={{
      color: "rgba(139, 92, 246, 0.15)", // Purple tint
      blur: 40,                           // Strong blur
      outline: "rgba(139, 92, 246, 0.3)", // Purple border
      shadow: "0 12px 48px rgba(139, 92, 246, 0.4)" // Custom shadow
    }}
  >
    <DialogHeader>
      <DialogTitle>Custom Glass Dialog</DialogTitle>
    </DialogHeader>
    <p>This dialog has a custom glass effect!</p>
  </DialogContent>
</Dialog>
```

--------------------------------

### Glass Input with Error State

Source: https://context7.com/crenspire/glass-ui/llms.txt

Visually indicate invalid input using the `error` prop. This highlights the input field to the user.

```tsx
import { Input } from "@/components/ui/glass/input"

<Input error placeholder="Invalid input" />
```

--------------------------------

### Apply Glass Effect to Card Using Hex Colors

Source: https://github.com/crenspire/glass-ui/blob/develop/components/ui/glass/GLASS_CUSTOMIZATION.md

Applies a glass effect to a Card component using hex color codes for background and outline, combined with transparency.

```tsx
<Card 
  glass={{
    color: "#ffffff",      // White in hex
    transparency: 0.1,    // Will convert to rgba(255, 255, 255, 0.1)
    blur: 20,
    outline: "#3b82f6"     // Blue in hex
  }}
>
  Content
</Card>
```

--------------------------------

### Checkbox Component Usage

Source: https://context7.com/crenspire/glass-ui/llms.txt

Provides a toggle control with glassmorphism styling. Supports a glow effect when checked and can be disabled.

```tsx
import { Checkbox } from "@/components/ui/glass/checkbox"
import { Label } from "@/components/ui/glass/label"

// Basic glass checkbox
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>
```

```tsx
// Checkbox with glow effect when checked
<div className="flex items-center space-x-2">
  <Checkbox id="newsletter" glow />
  <Label htmlFor="newsletter">Subscribe to newsletter</Label>
</div>
```

```tsx
// Disabled checkbox
<div className="flex items-center space-x-2">
  <Checkbox id="disabled" disabled />
  <Label htmlFor="disabled">Disabled option</Label>
</div>
```

--------------------------------

### Card with Glow Hover Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

A Card component that displays a glow effect on hover, configured via the 'hover' prop.

```tsx
// glow: Purple glow shadow that intensifies on hover
<Card hover="glow">Glowing card</Card>
```

--------------------------------

### Button with Shimmer Hover Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

A Button component with a dynamic shimmer effect that animates across its surface on hover, set using the 'effect' prop.

```tsx
// shimmer: Moving shimmer effect across the component
<Button effect="shimmer">Shimmer button</Button>
```

--------------------------------

### Apply Blue Glass Effect to Button

Source: https://github.com/crenspire/glass-ui/blob/develop/components/ui/glass/GLASS_CUSTOMIZATION.md

Applies a blue glass effect to a Button component, customizing color, blur, outline, and shadow.

```tsx
import { Button } from "@/components/ui/glass"

<Button 
  glass={{
    color: "rgba(59, 130, 246, 0.2)",   // Blue tint
    blur: 25,                           // 25px blur
    outline: "rgba(59, 130, 246, 0.4)", // Blue border
    shadow: "0 8px 32px rgba(59, 130, 246, 0.3)" // Custom shadow
  }}
>
  Click Me
</Button>
```

--------------------------------

### Card with Lift Hover Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

A Card component that visually lifts with an increased shadow on hover, configured using the 'hover' prop.

```tsx
// lift: Subtle lift with shadow increase
<Card hover="lift">Lifting card</Card>
```

--------------------------------

### Badge Component Variants

Source: https://context7.com/crenspire/glass-ui/llms.txt

Displays status indicators or labels with glassmorphism styling. Supports different variants like 'secondary', 'destructive', and 'outline'.

```tsx
import { Badge } from "@/components/ui/glass/badge"

// Basic glass badge
<Badge>Default</Badge>
```

```tsx
// Badge variants
<Badge variant="glass">Glass</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
```

```tsx
// Badge with glow
<Badge glow>Glowing Badge</Badge>
```

```tsx
// Badge with hover effects
<Badge hover="scale">Scale on Hover</Badge>
<Badge hover="lift">Lift on Hover</Badge>
<Badge hover="shimmer">Shimmer Effect</Badge>
```

--------------------------------

### Calendar with Glow Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

A calendar component featuring a glow effect. The 'glow' prop is directly applied to the Calendar component.

```tsx
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  glow
/>
```

--------------------------------

### Dropdown Menu with Glow Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

A dropdown menu enhanced with a glow effect. The 'glow' prop is added to the DropdownMenuContent component.

```tsx
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent glow>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

--------------------------------

### Glass Popover with Glow Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

A popover variant that includes a glow effect. Ensure the 'glow' prop is correctly applied to PopoverContent.

```tsx
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/glass/popover"
import { Button } from "@/components/ui/glass/button"

// Popover with glow
<Popover>
  <PopoverTrigger asChild>
    <Button>Glowing Popover</Button>
  </PopoverTrigger>
  <PopoverContent glow>
    <p>Content with purple glow effect</p>
  </PopoverContent>
</Popover>
```

--------------------------------

### Glass Spinner with Glow Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

A spinner component enhanced with a glow effect, controlled by the 'effect' prop.

```tsx
import { Spinner } from "@/components/ui/glass/spinner"

// Spinner with effect
<Spinner effect="glow" />
```

--------------------------------

### Apply Custom Purple Glass Effect to Card

Source: https://github.com/crenspire/glass-ui/blob/develop/components/ui/glass/GLASS_CUSTOMIZATION.md

Applies a custom purple glass effect to a Card component by specifying color, blur, transparency, outline, and outlineWidth.

```tsx
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/glass"

<Card 
  glass={{
    color: "rgba(139, 92, 246, 0.2)",  // Purple tint
    blur: 30,                           // 30px blur
    transparency: 0.3,                  // 30% opacity
    outline: "rgba(139, 92, 246, 0.5)", // Purple border
    outlineWidth: 2                    // 2px border
  }}
>
  <CardHeader>
    <CardTitle>Custom Glass Card</CardTitle>
  </CardHeader>
  <CardContent>
    This card has a custom purple glass effect!
  </CardContent>
</Card>
```

--------------------------------

### Badge with Scale Hover Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

A Badge component that scales up slightly when hovered over, utilizing the 'hover' prop.

```tsx
// scale: Scale up slightly on hover
<Badge hover="scale">Scaling badge</Badge>
```

--------------------------------

### Accordion with Glow Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

An accordion item that features a glow effect when expanded. Apply the 'glow' prop to the AccordionTrigger.

```tsx
<Accordion type="single" collapsible>
  <AccordionItem value="faq">
    <AccordionTrigger glow>FAQ with Glow</AccordionTrigger>
    <AccordionContent>Glows when expanded</AccordionContent>
  </AccordionItem>
</Accordion>
```

--------------------------------

### Button with Ripple Hover Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

A Button component that exhibits a ripple effect originating from the click point and expanding outwards on hover, controlled by the 'effect' prop.

```tsx
// ripple: Ripple effect that scales outward on hover
<Button effect="ripple">Ripple button</Button>
```

--------------------------------

### Glass Slider with Glow Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

A slider component featuring a glow effect. The 'glow' prop is applied to the Slider component.

```tsx
import { Slider } from "@/components/ui/glass/slider"

// Slider with glow effect
<Slider defaultValue={[75]} max={100} step={1} glow className="w-[300px]" />
```

--------------------------------

### Card with No Hover Effect

Source: https://context7.com/crenspire/glass-ui/llms.txt

A Card component explicitly set to have no hover effect using the 'hover' prop.

```tsx
// none: No hover effect
<Card hover="none">Static card</Card>
```

--------------------------------

### Range Glass Slider

Source: https://context7.com/crenspire/glass-ui/llms.txt

A slider component configured to allow selection of a range. The 'defaultValue' prop takes an array of two numbers.

```tsx
import { Slider } from "@/components/ui/glass/slider"

// Range slider
<Slider defaultValue={[25, 75]} max={100} step={5} className="w-[300px]" />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.