---
name: "@einui"
slug: "einui"
description: "Ein UI is a liquid-glass glassmorphism component library built with Radix UI primitives, Tailwind CSS v4, TypeScript, and React 19 (Next.js 16). It ships base components (glass-card, glass-button, glass-dialog, glass-input, glass-tabs, glass-badge, glass-avatar, glass-progress, glass-switch, glass-slider) and advanced glass components (command-palette, notification, morph-card, ripple, timeline, gauge, dock) plus calendar and clock widgets. Distributed via the shadcn registry format. Also includes an example admin panel block. Free and open source (ISC). Use for: adding a cohesive frosted-glass visual aesthetic with full dark mode to a Next.js app without hand-building every blur/backdrop-filter surface."
category: "Theming/styling"
tags: ["aesthetic", "auth", "blocks", "buttons", "cards", "dashboard", "design-system", "forms", "glassmorphism", "hooks", "loaders", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "ehsanghaffar"
website: "https://ui.eindev.ir"
github: "https://github.com/ehsanghaffar/einui"
registry: "https://ui.eindev.ir/r/registry.json"
pro: false
pro_url: null
github_stars: 120
component_count: 42
generated_at: "2026-07-28T08:00:50.948Z"
---

# @einui

Ein UI is a liquid-glass glassmorphism component library built with Radix UI primitives, Tailwind CSS v4, TypeScript, and React 19 (Next.js 16). It ships base components (glass-card, glass-button, glass-dialog, glass-input, glass-tabs, glass-badge, glass-avatar, glass-progress, glass-switch, glass-slider) and advanced glass components (command-palette, notification, morph-card, ripple, timeline, gauge, dock) plus calendar and clock widgets. Distributed via the shadcn registry format. Also includes an example admin panel block. Free and open source (ISC). Use for: adding a cohesive frosted-glass visual aesthetic with full dark mode to a Next.js app without hand-building every blur/backdrop-filter surface.

## Links

- Website: https://ui.eindev.ir
- GitHub: https://github.com/ehsanghaffar/einui
- Registry JSON: https://ui.eindev.ir/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/einui
- This file: https://sh4dcn.vercel.app/md/einui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.eindev.ir/r/registry.json
pnpm dlx shadcn@latest add https://ui.eindev.ir/r/registry.json
bunx shadcn@latest add https://ui.eindev.ir/r/registry.json
# clone the source repo
git clone https://github.com/ehsanghaffar/einui.git
# fetch the raw registry index
curl -s https://ui.eindev.ir/r/registry.json
```

## Components (42)

| name | type | description | install |
| --- | --- | --- | --- |
| glass-avatar | registry:ui | Circular profile images with gradient glow effects and fallback initials for user representation. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-avatar.json` |
| glass-badge | registry:ui | Small visual indicators for status, labels, or categories with frosted glass styling and color variants. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-badge.json` |
| glass-button | registry:ui | Interactive button components with multiple variants, sizes, and optional glow effects. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-button.json` |
| glass-card | registry:ui | Flexible container components with frosted glass morphism effect, perfect for displaying grouped content. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-card.json` |
| glass-dialog | registry:ui | Modal dialog components with backdrop blur and smooth animations for confirmations and forms. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-dialog.json` |
| glass-input | registry:ui | Form input components with focus glow animations and glass morphism styling. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-input.json` |
| glass-progress | registry:ui | Visual indicators for task completion with animated gradient fill and glow effects. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-progress.json` |
| glass-slider | registry:ui | Range input controls with gradient track, glow effects, and smooth thumb interaction. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-slider.json` |
| glass-switch | registry:ui | Toggle controls for binary options with smooth transitions and glow effects when activated. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-switch.json` |
| glass-tabs | registry:ui | Tabbed interface components with smooth transitions and glass morphism styling. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-tabs.json` |
| glass-tooltip | registry:ui | Contextual information popups with glass morphism styling and smooth animations on hover. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-tooltip.json` |
| glass-command-palette | registry:component | A spotlight-style command palette with keyboard navigation, search filtering, customizable positioning, and glass morphism styling. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-command-palette.json` |
| glass-notification | registry:component | A customizable notification system with glass morphism styling, allowing for different types of messages and actions. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-notification.json` |
| glass-dock | registry:component | A dock component with glass morphism styling and smooth animations. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-dock.json` |
| glass-gauge | registry:component | A gauge component with glass morphism styling, suitable for displaying progress or performance metrics. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-gauge.json` |
| glass-morph-card | registry:component | A card component with a morphing glass effect, suitable for displaying content in a visually appealing way. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-morph-card.json` |
| glass-ripple | registry:component | A ripple effect component that can be applied to various elements for a dynamic interaction experience. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-ripple.json` |
| glass-spotlight | registry:component | A spotlight component that highlights specific areas of the UI with a glass morphism effect. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-spotlight.json` |
| glass-timeline | registry:component | A timeline component with glass morphism styling, suitable for displaying events or processes in a chronological order. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-timeline.json` |
| base-widget | registry:ui | base widgets component | `npx shadcn@latest add https://ui.eindev.ir/r/base-widget.json` |
| calendar-widget | registry:component | Calendar widgets for displaying dates, events, and scheduling information. | `npx shadcn@latest add https://ui.eindev.ir/r/calendar-widget.json` |
| clock-widget | registry:component | Clock widgets including analog, digital, world clock, stopwatch, and timer with liquid glass styling. | `npx shadcn@latest add https://ui.eindev.ir/r/clock-widget.json` |
| weather-widget | registry:component | Weather widgets for displaying temperature, conditions, forecasts, and hourly data with liquid glass styling. | `npx shadcn@latest add https://ui.eindev.ir/r/weather-widget.json` |
| stats-widget | registry:component | Statistics and metrics widgets for displaying data, comparisons, and progress with liquid glass styling. | `npx shadcn@latest add https://ui.eindev.ir/r/stats-widget.json` |
| stock-widget | registry:component | Stock market widgets for displaying stock prices, trends, and news with liquid glass styling. | `npx shadcn@latest add https://ui.eindev.ir/r/stock-widget.json` |
| admin-panel | registry:block | A complete admin dashboard built with liquid glass components. | `npx shadcn@latest add https://ui.eindev.ir/r/admin-panel.json` |
| glass-select | registry:component | A liquid glass styled select dropdown with frosted glass styling. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-select.json` |
| glass-textarea | registry:component | A liquid glass styled textarea with focus glow effects. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-textarea.json` |
| glass-checkbox | registry:component | A liquid glass styled checkbox with animated check indicator. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-checkbox.json` |
| glass-radio | registry:component | A liquid glass styled radio group with animated selection. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-radio.json` |
| glass-skeleton | registry:component | A liquid glass styled skeleton loading component with shimmer. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-skeleton.json` |
| glass-table | registry:component | A liquid glass styled table for displaying tabular data. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-table.json` |
| glass-breadcrumb | registry:component | A liquid glass styled breadcrumb navigation component. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-breadcrumb.json` |
| glass-sheet | registry:component | A liquid glass styled sheet/drawer with slide animations. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-sheet.json` |
| glass-popover | registry:component | A liquid glass styled popover for floating content. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-popover.json` |
| glass-alert-dialog | registry:component | A liquid glass styled alert dialog for confirmations. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-alert-dialog.json` |
| glass-separator | registry:component | A liquid glass styled separator/divider component. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-separator.json` |
| glass-scroll-area | registry:component | A liquid glass styled custom scrollbar component. | `npx shadcn@latest add https://ui.eindev.ir/r/glass-scroll-area.json` |
| forgot-password-page | registry:block | A forgot password recovery page with email submission and confirmation state, including helpful tips and support contact. | `npx shadcn@latest add https://ui.eindev.ir/r/forgot-password-page.json` |
| login-page | registry:block | A complete login page with email and password authentication, password visibility toggle, remember me option, and social login buttons. | `npx shadcn@latest add https://ui.eindev.ir/r/login-page.json` |
| signup-page | registry:block | A complete sign up page with multi-step validation, password strength indicator, confirm password matching, and terms agreement checkbox. | `npx shadcn@latest add https://ui.eindev.ir/r/signup-page.json` |
| pricing-page | registry:block | A modern pricing page with multiple plan tiers, billing toggle, feature comparison, FAQ section, and call-to-action buttons. | `npx shadcn@latest add https://ui.eindev.ir/r/pricing-page.json` |

## For AI agents

```text
You are adding components from @einui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/einui.md) for the component list.
2. Fetch the machine-readable index: https://ui.eindev.ir/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: einui).
```