Glass Components

Beautiful, accessible, and performant glassmorphism components built with React, TypeScript, and Framer Motion

GlassCard

Foundational component with multiple variants, blur intensities, and smooth animations

Variants

Default

Subtle glass effect with balanced transparency

Accent

Highlighted with accent color gradients

Dark

Deeper glass effect for emphasis

Glow

Animated glow effect on hover

Blur Intensities

Light Blur

10px blur with 150% saturation

Medium Blur

20px blur with 180% saturation

Heavy Blur

30px blur with 200% saturation

Usage Example

<GlassCard variant="accent" blur="heavy" glow>
  <h2>Premium Feature</h2>
  <p>This card has accent colors and glow effect</p>
</GlassCard>

GlassButton

Interactive buttons with glass styling, loading states, and icon support

Variants

Sizes

With Icons

Loading State

Disabled State

Usage Example

<GlassButton
  variant="primary"
  size="lg"
  leftIcon={<Icon />}
  loading={isLoading}
>
  Click Me
</GlassButton>

GlassNav

Responsive navigation with smooth animations and mobile menu support

GlassInput

Form inputs with glass styling, validation, icons, and animations

Input Types

Must be at least 8 characters

Textarea

Maximum 500 characters

States

With Error

Usage Example

<GlassInput
  type="email"
  label="Email Address"
  placeholder="you@example.com"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  error={emailError}
  leftIcon={<Mail />}
  required
/>

GlassModal

Accessible modal dialogs with glass styling and smooth animations

Interactive Demo

Features

Accessibility

Full keyboard navigation and ARIA support via Radix UI

Scroll Lock

Prevents background scrolling when modal is open

Multiple Sizes

Five size options from small to full screen

Customizable

Optional footer, close button, and interaction settings

Usage Example

<GlassModal
  open={isOpen}
  onOpenChange={setIsOpen}
  title="Welcome"
  description="This is a glass modal"
  size="md"
  footer={
    <GlassButton onClick={() => setIsOpen(false)}>
      Close
    </GlassButton>
  }
>
  <p>Modal content goes here</p>
</GlassModal>

Accessibility

All components are built with accessibility in mind

Keyboard Navigation

  • • Full keyboard support for all interactive elements
  • • Tab order follows logical flow
  • • Focus indicators clearly visible

Screen Reader Support

  • • Proper ARIA labels and roles
  • • Semantic HTML structure
  • • Meaningful error messages

Visual Accessibility

  • • WCAG AA compliant color contrast
  • • Focus indicators with proper contrast
  • • Responsive text scaling

Touch Accessibility

  • • Touch targets meet 44x44px minimum
  • • Optimized for mobile interactions
  • • Reduced motion support

Performance

Optimized for smooth animations and minimal overhead

GPU
Accelerated
All animations use GPU for smooth 60fps
<5KB
Bundle Size
Minimal overhead per component
Tree
Shakeable
Import only what you need

Built with React, TypeScript, Tailwind CSS, and Framer Motion

Beautiful glassmorphism design for modern web applications