npm package: @idrsdev/ethereal-ui
Description: A mystical design system with ethereal glowing effects, built for React applications
Author: Ethereal UI Team
Latest version: 0.1.8
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Ethereal UI

A mystical design system with ethereal glowing effects, built for React applications that demand both beauty and functionality.

[![npm version](https://badge.fury.io/js/%40idrsdev%2Fethereal-ui.svg)](https://badge.fury.io/js/%40idrsdev%2Fethereal-ui)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)

## ✨ Features

- **🌙 Dark-first design** - Optimized for modern dark interfaces
- **✨ Ethereal effects** - Subtle glows, animations, and mystical interactions
- **🎭 Four unique components** - Each component offers surprising and delightful user experiences
- **⚡ Performance focused** - Lightweight and optimized for production
- **🎨 Fully customizable** - Easy theming with CSS variables
- **📱 Responsive** - Works beautifully on all devices
- **♿ Accessible** - Built with accessibility in mind
- **🔧 TypeScript** - Full TypeScript support with excellent DX
- **⚛️ React 18 & 19** - Compatible with both React 18 and React 19

## 🚀 Quick Start

### Installation

```bash
npm install @idrsdev/ethereal-ui
# or
yarn add @idrsdev/ethereal-ui
# or
pnpm add @idrsdev/ethereal-ui
```

### Setup

Add the CSS to your main CSS file:

```css
@import "@idrsdev/ethereal-ui/dist/ethereal.css";
```

Or import it in your main component:

```tsx
import "@idrsdev/ethereal-ui/dist/ethereal.css";
```

### Usage

```tsx
import {
  MysticButton,
  GlowCard,
  EtherealProgress,
  ParticleField,
} from "@idrsdev/ethereal-ui";

function App() {
  return (
    <div className="bg-slate-900 min-h-screen p-8">
      <MysticButton variant="mystic" glow="intense">
        Cast Spell
      </MysticButton>

      <GlowCard glowColor="purple" intensity="strong">
        <h3>Mystical Content</h3>
        <p>This card glows and tilts as you hover!</p>
      </GlowCard>

      <EtherealProgress value={75} variant="cosmic" showValue animated />

      <ParticleField particleCount={100} interactive>
        <h2>Interactive Background</h2>
        <p>Click to create particle bursts!</p>
      </ParticleField>
    </div>
  );
}
```

## 📦 Components

### MysticButton

A button with magical ripple effects and multiple ethereal variants.

```tsx
import { MysticButton } from "@idrsdev/ethereal-ui";

<MysticButton variant="mystic" glow="intense">
  Cast Spell
</MysticButton>;
```

**Props:**

- `variant`: `'mystic' | 'ethereal' | 'phantom' | 'void'`
- `size`: `'sm' | 'default' | 'lg' | 'xl'`
- `glow`: `'none' | 'subtle' | 'medium' | 'intense'`
- `ripple`: `boolean` - Enable/disable ripple effect
- `asChild`: `boolean` - Render as child component

### GlowCard

An interactive card with 3D tilt effects and customizable glow colors.

```tsx
import { GlowCard } from "@idrsdev/ethereal-ui";

<GlowCard glowColor="purple" intensity="strong">
  <h3>Mystical Content</h3>
  <p>This card glows and tilts as you hover!</p>
</GlowCard>;
```

**Props:**

- `glowColor`: `'purple' | 'blue' | 'green' | 'pink' | 'orange'`
- `intensity`: `'subtle' | 'medium' | 'strong'`
- `animated`: `boolean` - Enable/disable animations

### EtherealProgress

A progress bar with cosmic animations and particle effects.

```tsx
import { EtherealProgress } from "@idrsdev/ethereal-ui";

<EtherealProgress value={75} variant="cosmic" showValue animated />;
```

**Props:**

- `value`: `number` - Progress value (0-100)
- `variant`: `'default' | 'cosmic' | 'pulse' | 'wave'`
- `showValue`: `boolean` - Show percentage
- `animated`: `boolean` - Enable animations
- `glowIntensity`: `'low' | 'medium' | 'high'`

### ParticleField

An interactive particle system that responds to mouse movement and clicks.

```tsx
import { ParticleField } from "@idrsdev/ethereal-ui";

<ParticleField particleCount={100} interactive speed="medium">
  <h2>Interactive Background</h2>
  <p>Click to create particle bursts!</p>
</ParticleField>;
```

**Props:**

- `particleCount`: `number` - Number of particles
- `colors`: `string[]` - Array of particle colors
- `interactive`: `boolean` - Enable mouse interaction
- `speed`: `'slow' | 'medium' | 'fast'`
- `size`: `'small' | 'medium' | 'large'`

## 🎨 Styling

Ethereal UI uses Tailwind CSS. Make sure to include our styles in your CSS:

```css
@import "@ethereal-ui/react/dist/ethereal.css";
```

Or configure your Tailwind config to include our color palette:

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        ethereal: {
          primary: "hsl(260, 100%, 70%)",
          secondary: "hsl(200, 100%, 65%)",
          background: "hsl(220, 15%, 8%)",
          foreground: "hsl(220, 15%, 95%)",
          accent: "hsl(220, 15%, 18%)",
          muted: "hsl(220, 15%, 15%)",
          border: "hsl(220, 15%, 20%)",
          card: "hsl(220, 15%, 10%)",
        },
      },
    },
  },
};
```

## 🛠 Development

```bash
# Clone the repository
git clone https://github.com/idrsdev/ethereal-ui.git

# Install dependencies
npm install

# Start development server (website)
npm run dev

# Build the library
npm run build:lib

# Build TypeScript declarations
npm run build:types

# Clean build artifacts
npm run clean
```

## 🌐 Website & Documentation

Visit our [dedicated website](https://ethereal-ui.vercel.app) to see all components in action with interactive examples and detailed documentation.

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

### Development Setup

1. Fork the repository
2. Create a feature branch: `git checkout -b feature/amazing-feature`
3. Make your changes
4. Add tests if applicable
5. Commit your changes: `git commit -m 'Add amazing feature'`
6. Push to the branch: `git push origin feature/amazing-feature`
7. Open a Pull Request

## 📄 License

MIT © [Ethereal UI Team](LICENSE)

## 🙏 Acknowledgments

- [Framer Motion](https://www.framer.com/motion/) for animations
- [Radix UI](https://www.radix-ui.com/) for accessible primitives
- [Tailwind CSS](https://tailwindcss.com/) for styling
- [Lucide React](https://lucide.dev/) for icons

---

Made with ✨ and a touch of magic