@mawtech/glass-ui

Beautiful Apple-style glassmorphism React components.

✨ Features

• 🎨 Beautiful Design - Apple macOS/visionOS inspired glassmorphism
• 🌙 Dark Mode First - Optimized for dark interfaces
• ♿ Accessible - Full keyboard navigation and ARIA support
• 📦 Tree-shakeable - Only import what you use
• 🎭 Framer Motion - Smooth animations out of the box
• 🛠 TypeScript - Full type safety
• 📚 Storybook - Interactive component documentation

📦 Installation

npm install @mawtech/glass-ui
# or
yarn add @mawtech/glass-ui
# or
pnpm add @mawtech/glass-ui

🚀 Quick Start

1. Import Styles

Add the styles to your app's entry point:

import '@mawtech/glass-ui/styles.css';

2. Use Components

import { useState } from 'react';
import { GlassCard, GlassButton, GlassInput } from '@mawtech/glass-ui';

function App() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Submitted:', { email, password });
  };

  return (
    <div className="min-h-screen bg-glass-dark p-8">
      <GlassCard variant="glow" padding="lg">
        <h2 className="text-2xl font-bold text-white mb-4">Sign In</h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <GlassInput 
            label="Email" 
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="[email protected]"
          />
          <GlassInput 
            label="Password" 
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="••••••••"
          />
          <GlassButton type="submit" variant="primary" fullWidth>
            Sign In
          </GlassButton>
        </form>
      </GlassCard>
    </div>
  );
}

📚 Components

Core

• GlassCard - Container with glassmorphism effect
• GlassButton - Button with multiple variants
• GlassInput - Text input with icons and validation

GlassButton

// Regular button (default type="button")
<GlassButton onClick={() => console.log('clicked')}>
  Click me
</GlassButton>

// Form submit button - MUST specify type="submit"
<form onSubmit={handleSubmit}>
  <GlassButton type="submit">Submit Form</GlassButton>
</form>

// With loading state
<GlassButton loading>Processing...</GlassButton>

// With icons
<GlassButton leftIcon={<IconPlus />}>Add Item</GlassButton>

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | 'button' \| 'submit' \| 'reset' | 'button' | Button type. Must be "submit" for form submission | | variant | 'primary' \| 'secondary' \| 'ghost' \| 'danger' | 'primary' | Visual style | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Button size | | loading | boolean | false | Shows loading spinner, disables button | | disabled | boolean | false | Disables the button |

GlassInput

Works as both controlled and uncontrolled component:

// Controlled (recommended for forms)
const [email, setEmail] = useState('');

<GlassInput
  label="Email"
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  placeholder="[email protected]"
  error={!email ? 'Email is required' : undefined}
/>

// Uncontrolled
<GlassInput
  label="Username"
  defaultValue="john_doe"
  name="username"
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Label text above input | | error | string | - | Error message (shows in red) | | helperText | string | - | Helper text below input | | inputSize | 'sm' \| 'md' \| 'lg' | 'md' | Input size | | leftIcon | ReactNode | - | Icon inside input (left) | | rightIcon | ReactNode | - | Icon inside input (right) |

Form

• GlassTextarea - Multi-line text input
• GlassSelect - Dropdown select
• GlassCheckbox - Checkbox with custom styling
• GlassSwitch - Toggle switch

Layout

• GlassModal - Dialog/modal with backdrop blur
• GlassNavbar - Responsive navigation bar
• GlassSidebar - Collapsible sidebar

Overlay

• GlassDropdown - Dropdown menu
• GlassTooltip - Tooltip on hover
• GlassTabs - Tab navigation

Feedback

• GlassToast - Toast notifications
• GlassProgress - Linear and circular progress

Display

• GlassAvatar - User avatar with status
• GlassBadge - Badge/chip component
• GlassCommandPalette - ⌘K command menu

🪝 Hooks

useToast

import { ToastProvider, useToast } from '@mawtech/glass-ui';

function App() {
  return (
    <ToastProvider position="top-right">
      <MyComponent />
    </ToastProvider>
  );
}

function MyComponent() {
  const { success, error } = useToast();

  return (
    <button onClick={() => success('Saved!', 'Your changes have been saved.')}>
      Save
    </button>
  );
}

useModal

import { useModal, GlassModal, GlassButton } from '@mawtech/glass-ui';

function MyComponent() {
  const { isOpen, open, close } = useModal();

  return (
    <>
      <GlassButton onClick={open}>Open Modal</GlassButton>
      <GlassModal 
        open={isOpen} 
        onOpenChange={close}
        title="Hello!"
      >
        Modal content
      </GlassModal>
    </>
  );
}

useTheme

import { useTheme } from '@mawtech/glass-ui';

function ThemeToggle() {
  const { isDark, toggle } = useTheme();

  return (
    <button onClick={toggle}>
      {isDark ? '☀️' : '🌙'}
    </button>
  );
}

🎨 Design Tokens

/* Colors */
--glass-cyan: #00F0FF;
--glass-violet: #8B5CF6;
--glass-pink: #EC4899;
--glass-dark: #09090B;
--glass-card: #0F172A;

/* Glass Effect */
--glass-blur: 40px;
--glass-bg-opacity: 0.7;
--glass-border-opacity: 0.12;
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
--glass-glow: 0 0 40px rgba(0, 240, 255, 0.3);
--glass-radius: 20px;

/* Animation */
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 350ms;

🛠 With Tailwind CSS

If you're using Tailwind CSS, you can extend your config:

// tailwind.config.js
module.exports = {
  content: [
    // ... your content
    './node_modules/@mawtech/glass-ui/**/*.{js,mjs}',
  ],
  theme: {
    extend: {
      colors: {
        glass: {
          cyan: '#00F0FF',
          violet: '#8B5CF6',
          pink: '#EC4899',
          dark: '#09090B',
          card: '#0F172A',
        },
      },
    },
  },
};

📖 Documentation

🔗 View Live Documentation & Interactive Examples →

Explore all components with live previews, code examples, and customization options in our Storybook documentation.

🤝 Contributing

Contributions are welcome! Please read our contributing guide first.

📄 License

MIT © MAW Tech Solutions