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

Source: Dev.to

What I Built

• ✨ 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

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

Components

GlassCard

The foundation of any glass UI:

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

function MyComponent() {
  return (
    <GlassCard>
      <h2>Hello World</h2>
      <p>This looks so clean!</p>
    </GlassCard>
  );
}

The variant="glow" adds a subtle cyan glow on hover.

GlassButton

Buttons that actually look premium:

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

// Variants
// Primary
// Secondary
// Ghost
// Aurora ✨

The aurora variant features an animated gradient shifting 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';

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

Real Example

A login card you can build in minutes:

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

function LoginCard() {
  return (
    <GlassCard>
      <h2>Welcome Back</h2>

      <GlassInput placeholder="Email" />
      <GlassInput type="password" placeholder="Password" />

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

      <a href="#">Forgot password?</a>
    </GlassCard>
  );
}

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 am 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

• 📦 npm:
• 📖 Docs:
• 💻 GitHub:

What’s Next

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

Try It Out

npm install @mawtech/glass-ui

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? 👇