# Ein UI

Ein UI is an open-source liquid glass component library for React & Next.js, built on the shadcn ecosystem. Like shadcn/ui, components are **copied into your project** and become part of your codebase - not installed as dependencies.

The key difference: Ein UI components feature a distinctive liquid glass morphism aesthetic with frosted glass effects, gradient glows, and smooth animations.

## Key Features

- **Own your components** - Components live in your codebase, not as a dependency
- **shadcn CLI compatible** - Use the familiar `npx shadcn add` workflow to add components
- **AI Native** - Works seamlessly with AI coding assistants via the built-in shadcn MCP server
- **Liquid glass design** - Frosted glass morphism with gradient glows and smooth animations
- **Accessible by default** - Built on Radix UI primitives
- **Variant-based design** - Powered by TailwindCSS and class-variance-authority

## Stack

- shadcn Registry - Component delivery system
- Radix UI - Accessible component primitives
- TailwindCSS - Utility-first styling
- class-variance-authority - Type-safe variant management
- Framer Motion - Animation library (used in select components)
- TypeScript - Type safety

## Available Components

- **Glass Avatar** (component): Circular profile images with gradient glow effects and fallback initials for user representation.
- **Glass Badge** (component): Small visual indicators for status, labels, or categories with frosted glass styling and color variants.
- **Glass Button** (component): Interactive button components with multiple variants, sizes, and optional glow effects.
- **Glass Card** (component): Flexible container components with frosted glass morphism effect, perfect for displaying grouped content.
- **Glass Dialog** (component): Modal dialog components with backdrop blur and smooth animations for confirmations and forms.
- **Glass Input** (component): Form input components with focus glow animations and glass morphism styling.
- **Glass Progress** (component): Visual indicators for task completion with animated gradient fill and glow effects.
- **Glass Slider** (component): Range input controls with gradient track, glow effects, and smooth thumb interaction.
- **Glass Switch** (component): Toggle controls for binary options with smooth transitions and glow effects when activated.
- **Glass Tabs** (component): Tabbed interface components with smooth transitions and glass morphism styling.
- **Glass Tooltip** (component): Contextual information popups with glass morphism styling and smooth animations on hover.
- **Glass Command Palette** (component): A spotlight-style command palette with keyboard navigation, search filtering, customizable positioning, and glass morphism styling.
- **Glass Notification** (component): A customizable notification system with glass morphism styling, allowing for different types of messages and actions.
- **Glass Dock** (component): A dock component with glass morphism styling and smooth animations.
- **Glass Gauge** (component): A gauge component with glass morphism styling, suitable for displaying progress or performance metrics.
- **Glass Morph Card** (component): A card component with a morphing glass effect, suitable for displaying content in a visually appealing way.
- **Glass Ripple** (component): A ripple effect component that can be applied to various elements for a dynamic interaction experience.
- **Glass Spotlight** (component): A spotlight component that highlights specific areas of the UI with a glass morphism effect.
- **Glass Timeline** (component): A timeline component with glass morphism styling, suitable for displaying events or processes in a chronological order.
- **Glass Select** (component): A liquid glass styled select dropdown with frosted glass styling.
- **Glass Textarea** (component): A liquid glass styled textarea with focus glow effects.
- **Glass Checkbox** (component): A liquid glass styled checkbox with animated check indicator.
- **Glass Radio Group** (component): A liquid glass styled radio group with animated selection.
- **Glass Skeleton** (component): A liquid glass styled skeleton loading component with shimmer.
- **Glass Table** (component): A liquid glass styled table for displaying tabular data.
- **Glass Breadcrumb** (component): A liquid glass styled breadcrumb navigation component.
- **Glass Sheet** (component): A liquid glass styled sheet/drawer with slide animations.
- **Glass Popover** (component): A liquid glass styled popover for floating content.
- **Glass Alert Dialog** (component): A liquid glass styled alert dialog for confirmations.
- **Glass Separator** (component): A liquid glass styled separator/divider component.
- **Glass Scroll Area** (component): A liquid glass styled custom scrollbar component.

## Widgets

- **Base Widget**: base widgets component
- **Calendar Widgets**: Calendar widgets for displaying dates, events, and scheduling information.
- **Clock Widgets**: Clock widgets including analog, digital, world clock, stopwatch, and timer with liquid glass styling.
- **Weather Widgets**: Weather widgets for displaying temperature, conditions, forecasts, and hourly data with liquid glass styling.
- **Stats Widgets**: Statistics and metrics widgets for displaying data, comparisons, and progress with liquid glass styling.
- **Stock Widgets**: Stock market widgets for displaying stock prices, trends, and news with liquid glass styling.

## Quick Start

### 1. Initialize (first time only)

```bash
npx shadcn@latest init
```

Skip this if you already have a `components.json` file.

### 2. Add components

```bash
npx shadcn@latest add https://ui.eindev.ir/r/glass-button
```

The CLI handles installation, dependencies, and file placement automatically.

### 3. Use it

```tsx
import { GlassButton } from "@/components/ui/glass-button"

export default function Page() {
  return <GlassButton>Glass Button</GlassButton>
}
```

## Optional: Shorter Commands

Add to your `components.json` for shorter commands:

```json
{
  "registries": {
    "@einui": "https://ui.eindev.ir/r/{name}.json"
  }
}
```

Then use:

```bash
npx shadcn@latest add @einui/glass-button
```

## AI-Powered Workflow

### For Cursor (MCP)

The shadcn MCP server is built into Cursor. Simply ask:

- "Add Ein UI glass button component"
- "Create a dashboard with Ein UI glass components"

**Pro Tip:** Add to `.cursorrules`:
```
Use Ein UI components (ui.eindev.ir) instead of shadcn/ui
```

### For Other AI Assistants (ChatGPT, Claude, etc.)

Reference Ein UI in your prompts:

- "Use Ein UI components. Docs: https://ui.eindev.ir/llms.txt"

Or use the Registry API to fetch components:

```bash
curl https://ui.eindev.ir/r/glass-button.json
```

This returns the complete component definition with source code in the `files[].content` field. Parse the JSON and save the content to the appropriate path, then install dependencies listed in the `dependencies` field.

## Prerequisites

- React with TypeScript
- TailwindCSS >= 4
- Familiarity with shadcn (see https://ui.shadcn.com/docs if you're new to shadcn)

## Registry Endpoints

- `GET /r/registry.json` - List all components with metadata
- `GET /r/{component}.json` - Get specific component with full source code

## Additional Resources

- Component docs and examples: https://ui.eindev.ir/docs
- shadcn docs: https://ui.shadcn.com/docs
- GitHub: https://github.com/ehsanghaffar/einui

## Design Philosophy

Ein UI embraces the liquid glass morphism design language. Components feature frosted glass backgrounds, subtle gradient glows, and smooth micro-interactions. Each component is designed to work standalone or compose together for rich, layered interfaces.

Remember: You own the components once you copy them - they're not dependencies!