MAW open source / React components

Glass UI.

Interfaces with depth.
Components you can make your own.

Build glass-inspired React interfaces with ready-to-use cards, buttons, forms, and more. Free to use, open to customize.

MIT licensedReact 18+TypeScript

npm install @mawtech/glass-ui

Explore the docs View on npm

Live component previewMade with Glass UI

Make it yours.

Try the input, choose an accent, and save your preview.

GlassCard + GlassInput + GlassButton

A consistent starting point

Build with a shared family of inputs, navigation, overlays, and feedback components.

Your look, your tokens

Tune colors, blur, borders, and shadows with CSS variables to match your product.

Built for React developers

Typed component props, selective imports, and interactive examples in Storybook.

Quick start

From install to interface.

Install the package, import its stylesheet, and start composing. Use the live documentation for component props, variants, and more examples.

Browse the source on GitHub

Building something bigger? Talk to us about your interface.

Welcome.tsx

"use client";

import { GlassCard, GlassButton } from '@mawtech/glass-ui';
import '@mawtech/glass-ui/styles.css';

export default function Welcome() {
  return (
    <GlassCard variant="glow" padding="lg">
      <h2>Hello, Glass UI.</h2>
      <GlassButton onClick={() => alert('Hello!')}>
        Try it out
      </GlassButton>
    </GlassCard>
  );
}