DEV Community

Cover image for # I Built an Apple-Style Glassmorphism React Component Library 🚀
Adam Mawlawi
Adam Mawlawi

Posted on

# I Built an Apple-Style Glassmorphism React Component Library 🚀

#react #javascript #opensource #webdev

I just open-sourced @mawtech/glass-ui — a React component library featuring that sleek Apple macOS/visionOS glassmorphism design.

I built this because I was tired of recreating the same glass effects for every project. Blurred backgrounds, subtle borders, smooth animations, it takes forever to get right.

So I packaged it all into a reusable library. And now it's free for everyone.

What I Built

18 production-ready React components with:

  • ✨ Apple-inspired glassmorphism design
  • 🌙 Dark mode optimized
  • 📝 Full TypeScript support
  • 🎬 Framer Motion animations
  • ♿ Accessible (WCAG 2.1 AA)
  • 🌳 Tree-shakeable

Installation 

npm install @mawtech/glass-ui
Enter fullscreen mode Exit fullscreen mode

Then import the styles:

import '@mawtech/glass-ui/styles.css';
Enter fullscreen mode Exit fullscreen mode

That's it. You're ready to go.

Components

GlassCard

The foundation of any glass UI:

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

function MyComponent() {
  return (
    <GlassCard variant="glow" padding="lg">
      <h2>Hello World</h2>
      <p>This looks so clean!</p>
    </GlassCard>
  );
}
Enter fullscreen mode Exit fullscreen mode

The variant="glow" adds a subtle cyan glow on hover. One of my favorites.

GlassButton

Buttons that actually look premium:

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

<GlassButton variant="primary">Primary</GlassButton>
<GlassButton variant="secondary">Secondary</GlassButton>
<GlassButton variant="ghost">Ghost</GlassButton>
<GlassButton variant="aurora">Aurora ✨</GlassButton>
Enter fullscreen mode Exit fullscreen mode

The aurora variant has an animated gradient that shifts between cyan, violet, and pink. Great for CTAs.

GlassInput

Forms that don't look like they're from 2010:

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

<GlassInput 
  label="Email"
  placeholder="Enter your email"
  type="email"
/>
Enter fullscreen mode Exit fullscreen mode

Includes error states, icons, and a built-in password visibility toggle.

Real Example

Here's a login card you can build in minutes:

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

function LoginCard() {
  return (
    <GlassCard variant="elevated" padding="xl">
      <h2 className="text-2xl font-bold text-white mb-6">
        Welcome Back
      </h2>

      <div className="space-y-4">
        <GlassInput 
          label="Email"
          type="email"
          placeholder="you@example.com"
        />

        <GlassInput 
          label="Password"
          type="password"
          placeholder="••••••••"
        />

        <GlassButton variant="primary" fullWidth>
          Sign In
        </GlassButton>

        <GlassButton variant="ghost" fullWidth>
          Forgot password?
        </GlassButton>
      </div>
    </GlassCard>
  );
}
Enter fullscreen mode Exit fullscreen mode

All 18 Components

  • GlassCard
  • GlassButton
  • GlassInput
  • GlassTextarea
  • GlassSelect
  • GlassCheckbox
  • GlassSwitch
  • GlassModal
  • GlassNavbar
  • GlassSidebar
  • GlassDropdown
  • GlassTooltip
  • GlassTabs
  • GlassToast (with useToast hook)
  • GlassProgress
  • GlassAvatar
  • GlassBadge
  • GlassCommandPalette (CMD+K menu)

Tech Stack

  • React 18+
  • TypeScript
  • Tailwind CSS
  • Framer Motion
  • Radix UI (for accessibility)

Why I Built This

I run MAW Tech Solutions and I'm building several SaaS products. I needed a consistent, beautiful UI across all of them.

Instead of copy-pasting components between projects, I extracted them into this library. Now I use it for everything — and you can too.

Links

What's Next

I'm actively maintaining this and planning to add:

  • Light mode support
  • More component variants
  • Figma design kit
  • Premium templates

Try It Out 

npm install @mawtech/glass-ui
Enter fullscreen mode Exit fullscreen mode

Give it a star on GitHub if you find it useful! ⭐

I'd love to hear your feedback. What components would you like to see added? 👇

Top comments (0)