glass-ui-vue

Glass UI

A modern Vue 3 component library featuring beautiful glassmorphism effects.
Quickly build elegant, responsive, and accessible UIs with ready-to-use glass components.

✨ Features

• Glassmorphism Design: All components use frosted glass backgrounds and soft shadows.
• Vue 3 Support: Built with <script setup> and Composition API.
• Customizable: Easily change variants, padding, alignment, and more via props.
• Light & Dark Themes: Automatic support for both themes.
• Accessible: Focus rings, ARIA attributes, and keyboard navigation.
• Component Library: Panel, Stack, Button, Alert, Badge, Input, Grid, Toaster, and more.

🚀 Getting Started

1. Install

npm install glass-ui-vue
# or
yarn add glass-ui-vue
# or
pnpm add glass-ui-vue

2. Register the Plugin

// main.js or main.ts
import { createApp } from 'vue';
import App from './App.vue';
import GlassUI from 'glass-ui-vue';
import 'glass-ui-vue/styles';

const app = createApp(App);
app.use(GlassUI);
app.mount('#app');

Or import components locally:

import { Button, Panel } from 'glass-ui-vue';

🧩 Components

Component	Description
Panel	Glass container for grouping content, supports variants and padding.
Stack	Flexible layout for stacking children vertically or horizontally.
Button	Glassmorphic button with variants and disabled state.
Alert	Stylish alert for messages and notifications, supports icon, title, description, and is dismissible.
Badge	Status or highlight badge, supports all variants.
Input	Glass input field, supports types and custom borders.
Grid	Responsive grid system for arranging items in columns.
Toaster	Toast notification system with variants and auto-dismiss.

See the Storybook for live demos and prop documentation.

📚 Documentation & Community

• Storybook: https://suraj-bharti.github.io/glass-ui/
  Live demos and prop documentation for every component.
• Demo App: https://suraj-bharti.github.io/glass-ui/demo/
  Try out Glass UI components interactively.
• GitHub Repo: https://github.com/suraj-bharti/glass-ui
• Issues & Contributions:
  Please open issues or pull requests for bugs, features, or improvements.
• License: MIT

🛡️ License & Attribution

This project is licensed under the MIT License.

Attribution:
Please credit Surajdev Pandey when using this library in your projects.
Do not remove or alter the original attribution in source or documentation.

💡 Example Usage

<template>
  <g-panel variant="primary" padding="lg">
    <h1>Welcome to Glass UI</h1>
    <g-alert
      variant="info"
      dismissible
      :icon="'ℹ️'"
      title="Info Alert"
      description="This is an info alert with icon, title, and description!"
    />
    <g-alert
      variant="success"
      :icon="'✔️'"
      title="Success!"
      description="Your operation was completed successfully."
    />
    <g-alert
      variant="danger"
      dismissible
    >
      <template #icon>
        <svg width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="12" fill="#e74c3c"/>
          <path d="M8 8l8 8M16 8l-8 8" stroke="#fff" stroke-width="2"/>
        </svg>
      </template>
      <strong>Danger:</strong> Custom SVG icon!
    </g-alert>
    <g-button variant="success" @click="notify">Show Toast</g-button>
    <!-- Toaster should be mounted at the root or in App.vue -->
    <Toaster />
  </g-panel>
</template>

<script setup>
import { toast } from 'glass-ui-vue';

function notify() {
  toast.emit('show', {
    message: 'Hello from Glass UI!',
    variant: 'success',
    duration: 3000
  });
}
</script>

📝 Alert Props

Prop	Type	Default	Description
variant	String	'info'	Visual style: primary, secondary, success, etc.
icon	String, Component, or Slot	null	Emoji, component, or slot for leading icon
title	String	''	Bold headline text
description	String	''	Secondary description text
dismissible	Boolean	false	Show a close (dismiss) button
timeout	Number	null	Auto-dismiss after ms (e.g., 3000 for 3s)

• If title and description are empty, slot content is rendered.
• The icon prop accepts an emoji, a component, or you can use the #icon slot for custom SVG.

🛎️ Using the Toaster: Two Approaches

Glass UI provides two ways to trigger toast notifications.
Choose the one that best fits your use case:

1. Global Event Emitter (toast.emit)

How:
Import the toast event bus and emit notifications from anywhere in your app.

import { toast } from 'glass-ui-vue';

function notify() {
  toast.emit('show', {
    message: 'Hello from Glass UI!',
    variant: 'success',
    duration: 3000
  });
}

When to use:

• You want to trigger toasts from any component, even deeply nested ones.
• You want a decoupled, global notification system.
• You don’t want to pass refs or props around.

Note:
Mount <Toaster /> once at the root (e.g., in App.vue).

2. Local Ref Method

How:
Use a ref to the <Toaster /> component and call its show method directly.

<template>
  <Toaster ref="toaster" />
  <g-button @click="notify">Show Toast</g-button>
</template>

<script setup>
import { ref } from 'vue';
import { Toaster } from 'glass-ui-vue';

const toaster = ref(null);

function notify() {
  toaster.value.show('Hello from Glass UI!', { variant: 'success', duration: 3000 });
}
</script>

When to use:

• You only need to show toasts from within a specific component or local area.
• You want more direct control or to avoid global state.
• You don’t want to rely on an event bus.

Tip:
You can use both methods in the same app if needed!

🤝 Contributing

We welcome contributors to help build a top-class UI component library!
Whether you want to fix bugs, add features, improve documentation, or suggest ideas—your input is valued.

• Please open issues or pull requests on GitHub.
• See the CONTRIBUTING.md for guidelines and tips.

Let's build an amazing glassmorphism UI kit

⭐️ Star & Share

If you find Glass UI useful, please ⭐️ star the repo and share it with others!

Glass UI © 2025 — Created by Surajdev Pandey