🧊 FrostGlass

A beautiful Glassmorphism React UI component library with 30+ modern, customizable components.

✨ Features

• 🎨 Glassmorphism Design - Modern frosted glass aesthetic with blur effects
• 📦 30+ Components - Buttons, Cards, Modals, Forms, Tables, and more
• 🎯 Zero Config - Works out of the box with sensible defaults
• 🌙 Dark Mode Ready - Beautiful in both light and dark themes
• ⚡ Lightweight - Tree-shakable, only import what you need
• 🔧 Highly Customizable - Easy to extend with CSS variables
• 📱 Responsive - Mobile-first design approach

📦 Installation

# npm
npm install frostglass

# yarn
yarn add frostglass

# pnpm
pnpm add frostglass

Peer Dependencies:

npm install react react-dom

🚀 Quick Start

import { GlassButton, GlassCard, GlassModal } from 'frostglass';
import 'frostglass/style.css';

function App() {
  return (
    <GlassCard hoverEffect>
      <h2>Welcome to FrostGlass</h2>
      <GlassButton variant="gradient">Get Started</GlassButton>
    </GlassCard>
  );
}

📚 Components

Core Components

| Component | Description | |-----------|-------------| | GlassButton | Multi-variant button with primary, gradient, secondary, ghost styles | | GlassCard | Container with frosted glass background | | GlassModal | Full-screen modal dialog with animations |

Form Components

| Component | Description | |-----------|-------------| | GlassInput | Text input with label and error state | | GlassTextarea | Multi-line text input | | GlassDropdown | Custom styled select component | | GlassSwitch | Toggle switch | | GlassCheckbox | Checkbox with label | | GlassRadio | Radio button group | | GlassSlider | Range slider |

Data Display

| Component | Description | |-----------|-------------| | GlassTable | Data table with custom columns | | GlassTabs | Tab navigation with content panels | | GlassProgress | Progress bar | | GlassBadge | Status badge (success, warning, error) | | GlassAvatar | User avatar with fallback | | GlassTooltip | Hover tooltip | | GlassAlert | Alert messages | | GlassSkeleton | Loading placeholder |

Advanced Components

| Component | Description | |-----------|-------------| | GlassCalendar | Date picker calendar | | GlassDrawer | Slide-out panel | | GlassAccordion | Collapsible content sections | | GlassCarousel | Image/content carousel | | GlassTimeline | Event timeline | | GlassPopover | Click-triggered popup | | GlassConfirm | Confirmation dialog | | GlassRating | Star rating | | GlassUpload | Drag & drop file upload | | GlassPagination | Page navigation | | GlassMenu | Vertical navigation menu | | GlassTag | Closeable tags | | GlassSpinner | Loading spinner |

🎨 Customization

CSS Variables

Override these CSS variables to customize the theme:

:root {
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-blur: 12px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --accent-primary: #6366f1;
  --accent-secondary: #8b5cf6;
}

Component Variants

// Button variants
<GlassButton variant="primary">Primary</GlassButton>
<GlassButton variant="gradient">Gradient</GlassButton>
<GlassButton variant="secondary">Secondary</GlassButton>
<GlassButton variant="ghost">Ghost</GlassButton>

// Button sizes
<GlassButton size="sm">Small</GlassButton>
<GlassButton size="md">Medium</GlassButton>
<GlassButton size="lg">Large</GlassButton>

// Badge variants
<GlassBadge variant="success">Active</GlassBadge>
<GlassBadge variant="warning">Pending</GlassBadge>
<GlassBadge variant="error">Failed</GlassBadge>

📖 Usage Examples

Modal Dialog

import { useState } from 'react';
import { GlassModal, GlassButton, GlassInput } from 'frostglass';
import 'frostglass/style.css';

function LoginModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <GlassButton onClick={() => setIsOpen(true)}>Login</GlassButton>
      <GlassModal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
        title="Login"
      >
        <GlassInput label="Email" type="email" placeholder="[email protected]" />
        <GlassInput label="Password" type="password" />
        <GlassButton variant="gradient" style={{ width: '100%' }}>
          Sign In
        </GlassButton>
      </GlassModal>
    </>
  );
}

Data Table

import { GlassTable, GlassBadge } from 'frostglass';
import 'frostglass/style.css';

const columns = [
  { key: 'name', title: 'Name' },
  { key: 'email', title: 'Email' },
  { 
    key: 'status', 
    title: 'Status',
    render: (val) => <GlassBadge variant={val === 'active' ? 'success' : 'warning'}>{val}</GlassBadge>
  }
];

const data = [
  { name: 'Alice', email: '[email protected]', status: 'active' },
  { name: 'Bob', email: '[email protected]', status: 'pending' }
];

<GlassTable columns={columns} data={data} />

Tabs Navigation

import { GlassTabs, GlassTabsList, GlassTabsTrigger, GlassTabsContent } from 'frostglass';
import 'frostglass/style.css';

<GlassTabs defaultValue="overview">
  <GlassTabsList>
    <GlassTabsTrigger value="overview">Overview</GlassTabsTrigger>
    <GlassTabsTrigger value="analytics">Analytics</GlassTabsTrigger>
    <GlassTabsTrigger value="settings">Settings</GlassTabsTrigger>
  </GlassTabsList>
  <GlassTabsContent value="overview">Overview content...</GlassTabsContent>
  <GlassTabsContent value="analytics">Analytics content...</GlassTabsContent>
  <GlassTabsContent value="settings">Settings content...</GlassTabsContent>
</GlassTabs>

🌐 CDN Usage

For non-bundled projects, use via CDN:

<!-- Dependencies -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<!-- FrostGlass -->
<link rel="stylesheet" href="https://unpkg.com/frostglass/dist-lib/frostglass.css">
<script src="https://unpkg.com/frostglass/dist-lib/frostglass.umd.js"></script>

<script>
  const { GlassButton, GlassCard } = window.FrostGlass;
  // Use components with React.createElement()

  // Toast API (no React integration needed)
  window.FrostGlass.toast.success('Saved!', { title: 'Success' });
</script>

📄 License

MIT © ius.