React Premium Glass

English | 中文

A high-quality React glassmorphism GlassCard component

The current version is an incomplete test version. Due to the implementation using html2canvas and WebGL, considering the existing performance issues, the component effect currently only supports static one-time rendering. We hope that users and other developers can propose solutions and join the development.

Features

• 🎨 Modern Design - Based on the latest glassmorphism design trends
• 🔧 TypeScript Support - Complete type definitions
• 📱 Responsive Design - Adapts to various screen sizes
• 🎯 Easy to Use - Clean API design
• 📚 Storybook Documentation - Interactive component documentation

Installation

npm install react-premium-glass

Quick Start

import { GlassCard } from "react-premium-glass";

function App() {
  return (
    <div
      style={{
        background: "#212121",
      }}
    >
      <GlassCard
        enableWebGL={true}
        style={{
          borderRadius: "100px",
          color: "white"
        }}
      >
        <h2>Welcome to React Premium Glass</h2>
        <p>This is a beautiful glassmorphism card component</p>
      </GlassCard>
    </div>
  );
}

Components

GlassCard

<GlassCard
  enableWebGL={true}
>
  <p>Card content</p>
</GlassCard>

API Reference

GlassCard Props

| Prop | Type | Default | Description | | ------------ | --------------- | ------- | -------------------- | | enableWebGL | boolean | true | Enable WebGL refraction effect | | className | string | - | Custom CSS class name | | style | CSSProperties | - | Custom styles | | children | ReactNode | - | Child elements |

Development

# Install dependencies
npm install

# Start Storybook development server
npm run dev

# Build component library
npm run build

# Code linting
npm run lint

Build and Publish

# Build
npm run build

# Publish to npm
npm publish

License

MIT License

Contributing

Issues and Pull Requests are welcome!

Changelog

0.0.1-alpha

• Initial release
• Includes GlassCard component
• Complete TypeScript support
• Storybook documentation