### Install glasscn-ui package

Source: https://github.com/itsjavi/glasscn-ui/blob/main/README.md

Install the glasscn-ui component library using npm. This is the first step to integrate the library into your project, making its components available for use.

```bash
npm install glasscn-ui
```

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

### Example Usage of Glasscn UI Button

Source: https://github.com/itsjavi/glasscn-ui/blob/main/stories/button/button.mdx

Demonstrates how to import and use the Glasscn UI Button component, applying custom 'primary' color, 'xl' radius, and a 'loading' state. This snippet shows a button with text 'Submitting...' while in a loading state.

```tsx
import { Button } from 'glasscn-ui'
;<Button color="primary" radius="xl" loading>
  Submitting...
</Button>
```

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

### Configure Tailwind CSS with glasscn-ui preset

Source: https://github.com/itsjavi/glasscn-ui/blob/main/README.md

Configure your Tailwind CSS project to use the glasscn-ui preset. This involves importing `createTailwindPreset` and adding the generated preset to your `tailwind.config.js` file, along with including glasscn-ui's classes in the content array. The preset allows for custom base radius and extensive color customization for primary, secondary, gray, danger, warning, background, foreground, and border colors.

```javascript
import { createTailwindPreset } from 'glasscn-ui'

// Example preset configuration (config object is optional)
const glasscnPreset = createTailwindPreset({
  baseRadius: '0.5em',
  colors: {
    // For primary, secondary, gray, danger and warning colors,
    // you can use any Tailwind color name, or a custom color palette.
    primary: 'blue',
    secondary: 'yellow',
    gray: {
      50: '#f9fafb',
      100: '#f3f4f6',
      200: '#e5e7eb',
      300: '#d1d5db',
      400: '#9ca3af',
      500: '#6b7280',
      600: '#4b5563',
      700: '#374151',
      800: '#1f2937',
      900: '#111827'
    },
    danger: 'red',
    warning: 'yellow',
    background: {
      light: '#ffffff',
      dark: '#000000'
    },
    foreground: {
      light: '#000000',
      dark: '#ffffff'
    },
    foregroundMuted: {
      light: '#9ca3af',
      dark: '#6b7280'
    },
    border: {
      light: '#d1d5db',
      dark: '#374151'
    },
    borderMuted: {
      light: '#e5e7eb',
      dark: '#4b5563'
    }
  }
})

export default {
  content: [
    // ...
    './node_modules/glasscn-ui/dist/index.js' // tell Tailwind's JIT to also include glasscn-ui's classes.
  ],
  presets: [glasscnPreset]
}
```

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

### Define Global CSS Styles and Theme Variables with Tailwind

Source: https://github.com/itsjavi/glasscn-ui/blob/main/README.md

This CSS snippet establishes global styles using Tailwind CSS directives. It defines custom CSS variables for managing light and dark themes, setting background, foreground, and border colors. Additionally, it applies fundamental styling rules for box-sizing, positioning, and hidden elements, ensuring consistent base styles across the application.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: theme('colors.background.light');
    --background-muted: theme('colors.background.muted.light');
    --foreground: theme('colors.foreground.light');
    --foreground-muted: theme('colors.foreground.muted.light');
    --border: theme('colors.border.light');
    --border-muted: theme('colors.border.muted.light');
  }

  .dark {
    --background: theme('colors.background.dark');
    --background-muted: theme('colors.background.muted.dark');
    --foreground: theme('colors.foreground.dark');
    --foreground-muted: theme('colors.foreground.muted.dark');
    --border: theme('colors.border.dark');
    --border-muted: theme('colors.border.muted.dark');
  }

  *,
  ::before,
  ::after {
    border-color: var(--border);
  }

  * {
    box-sizing: border-box;
    position: relative;
  }

  [hidden] {
    display: none;
  }

  [inert] {
    pointer-events: none;
    user-select: none;
  }

  html {
    font-size: 16px;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }
}
```

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