Mornox Buttons

The premium, high-performance glassmorphism button component for React. Designed for modern interfaces that need that extra "pop" without the complexity.

View Live Demo

Features

• True Glassmorphism: Multi-layered backdrop blur, reflection, and border handling.
• Configurable Glow: Control the color, blur radius, and opacity of the ambient light.
• Physics-based Highlights: Internal layers prevent extrusion bugs on rounded corners.
• Interactive: Hover states for glow intensity, internal shimmer, and scale.
• Dark Mode Ready: Automatically adapts surface opacity and colors for light/dark themes.

Requirements

This component uses Tailwind CSS for its internal layout structure, but its advanced visual effects (glow, pulse, glass) differ:

• Visuals: Powered by direct CSS and injected styles. No external tailwind.config.js changes required for animations.
• Colors: Supports both Tailwind utility classes (e.g. from-indigo-500) AND standard CSS values (e.g. #ff0000, linear-gradient(...)).

Installation

npm install @mornox/mornox-buttons
# or
yarn add @mornox/mornox-buttons

Quick Start

import { MornoxButton } from "@mornox/mornox-buttons";

function App() {
  return (
    <div className="p-10 flex gap-4 bg-gray-900">
      {/* Basic Usage */}
      <MornoxButton>Get Started</MornoxButton>

      {/* Customized */}
      <MornoxButton glowColor="from-emerald-400 to-cyan-500" glowBlur="blur-xl" cornerRadius="rounded-full">
        Success
      </MornoxButton>
    </div>
  );
}

📋 Props

| Prop | Type | Default | Description | | ------------------- | ------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------- | | variant | 'air' \| 'regular' | 'air' | Shorthand to set both Light and Dark variants. | | lightVariant | 'air' \| 'regular' | 'air' | Specific visual style for Light Mode. | | darkVariant | 'air' \| 'regular' | 'air' | Specific visual style for Dark Mode. | | size | 'tiny' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' | 'lg' | Button size. | | glowColor | string | 'linear-gradient(...)' | Tailwind classes OR CSS value (#f00, linear-gradient(...)). | | glowBlur | string \| number | 32 | Blur amount in pixels (number) or class (blur-xl). | | glowOpacity | string \| number | 0.4 | Opacity (0-1 number) or class (opacity-40). | | hoverGlowBlur | string \| number | 48 | Blur amount when hovered (px) or class. | | hoverGlowOpacity | string \| number | 0.6 | Opacity when hovered (0-1) or class. | | cornerRadius | number \| string | 16 | Border radius in pixels (number) or CSS string (e.g. "12px"). | | showPulse | boolean | true | Enable/disable the breathing pulse animation. | | pulseDuration | string | '4s' | Duration of the pulse animation. | | borderIntensity | 'subtle' \| 'medium' \| 'ultra' | 'medium' | Strength of the gradient border/reflection. | | highlightOpacity | number | 0.5 | Opacity of the top highlight reflection (0-1). | | shimmerMode | 'none' \| 'hover' \| 'always' | 'hover' | When to show the shimmer effect. | | shimmerDuration | string | '1.5s' | Duration of the shimmer animation. | | shimmerOpacity | number | 0.3 | Opacity of the shimmer effect (0-1). | | contrastThreshold | number | 190 | Luma threshold (0-255) for adaptive text. Below = white text, above = dark text. | | forceTheme | 'light' \| 'dark' | undefined | Force the button to render in a specific theme mode. | | className | string | '' | Additional CSS classes to apply to the button. |

Development

This project uses React and Tailwind CSS.

1. Install dependencies: npm install
2. Run local server: npm run start
3. Build for production: npm run build

License

MIT © Mornox