Ein UI Components — Preview & Copy | 21st

Ein UI

by eindev

2components22views

Installs all 44 components. Without our CLI, run instead.

Auto-indexed

Glass Command Palette

Glass Spotlight

That's all 2 components

About Ein UI

Ein UI publishes a shadcn registry at ui.eindev.ir, with 44 components installable through the shadcn CLI.

Components: 44
GitHub stars: 142
Last commit: Aug 11, 2026
Repository: einui/einui

Also in the Ein UI registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

Admin Panel
admin-panel
A complete admin dashboard built with liquid glass components.
lucide-react1 file
Base Widget
base-widget
base widgets component
framer-motion1 file
Calendar Widgets
calendar-widget
Calendar widgets for displaying dates, events, and scheduling information.
lucide-react1 file
Docs ↗
Clock Widgets
clock-widget
Clock widgets including analog, digital, world clock, stopwatch, and timer with liquid glass styling.
lucide-react1 file
Docs ↗
Forgot Password Page
forgot-password-page
A forgot password recovery page with email submission and confirmation state, including helpful tips and support contact.
lucide-react1 file
Glass Alert Dialog
glass-alert-dialog
A liquid glass styled alert dialog for confirmations.
@radix-ui/react-alert-dialog1 file
Docs ↗
Glass Avatar
glass-avatar
Circular profile images with gradient glow effects and fallback initials for user representation.
@radix-ui/react-avatar1 file
Docs ↗
Glass Badge
glass-badge
Small visual indicators for status, labels, or categories with frosted glass styling and color variants.
class-variance-authority1 file
Docs ↗
Glass Breadcrumb
glass-breadcrumb
A liquid glass styled breadcrumb navigation component.
lucide-react1 file
Docs ↗
Glass Button
glass-button
Interactive button components with multiple variants, sizes, and optional glow effects.
@radix-ui/react-slot, class-variance-authority1 file
Docs ↗
Glass Card
glass-card
Flexible container components with frosted glass morphism effect, perfect for displaying grouped content.
1 file
Docs ↗
Glass Checkbox
glass-checkbox
A liquid glass styled checkbox with animated check indicator.
@radix-ui/react-checkbox, framer-motion, lucide-react1 file
Docs ↗
Glass Dialog
glass-dialog
Modal dialog components with backdrop blur and smooth animations for confirmations and forms.
@radix-ui/react-dialog, lucide-react1 file
Docs ↗
Glass Dock
glass-dock
A dock component with glass morphism styling and smooth animations.
1 file
Docs ↗
Glass Gauge
glass-gauge
A gauge component with glass morphism styling, suitable for displaying progress or performance metrics.
1 file
Docs ↗
Glass Input
glass-input
Form input components with focus glow animations and glass morphism styling.
1 file
Docs ↗
Glass Morph Card
glass-morph-card
A card component with a morphing glass effect, suitable for displaying content in a visually appealing way.
1 file
Docs ↗
Glass Notification
glass-notification
A customizable notification system with glass morphism styling, allowing for different types of messages and actions.
lucide-react1 file
Docs ↗
Glass Orb
glass-orb
An interactive ambient orb that follows the cursor, emits soft glass particle trails, and updates its glow based on status.
1 file
Glass Popover
glass-popover
A liquid glass styled popover for floating content.
@radix-ui/react-popover1 file
Docs ↗
Glass Progress
glass-progress
Visual indicators for task completion with animated gradient fill and glow effects.
@radix-ui/react-progress1 file
Docs ↗
Glass Radio Group
glass-radio
A liquid glass styled radio group with animated selection.
@radix-ui/react-radio-group, framer-motion1 file
Docs ↗
Glass Ripple
glass-ripple
A ripple effect component that can be applied to various elements for a dynamic interaction experience.
1 file
Docs ↗
Glass Scroll Area
glass-scroll-area
A liquid glass styled custom scrollbar component.
@radix-ui/react-scroll-area1 file
Docs ↗
Glass Select
glass-select
A liquid glass styled select dropdown with frosted glass styling.
@radix-ui/react-select, lucide-react1 file
Docs ↗
Glass Separator
glass-separator
A liquid glass styled separator/divider component.
@radix-ui/react-separator1 file
Docs ↗
Glass Sheet
glass-sheet
A liquid glass styled sheet/drawer with slide animations.
@radix-ui/react-dialog, class-variance-authority, lucide-react1 file
Docs ↗
Glass Skeleton
glass-skeleton
A liquid glass styled skeleton loading component with shimmer.
framer-motion1 file
Docs ↗
Glass Slider
glass-slider
Range input controls with gradient track, glow effects, and smooth thumb interaction.
@radix-ui/react-slider1 file
Docs ↗
Glass Switch
glass-switch
Toggle controls for binary options with smooth transitions and glow effects when activated.
@radix-ui/react-switch1 file
Docs ↗
Glass Table
glass-table
A liquid glass styled table for displaying tabular data.
1 file
Docs ↗
Glass Tabs
glass-tabs
Tabbed interface components with smooth transitions and glass morphism styling.
@radix-ui/react-tabs, framer-motion1 file
Docs ↗
Glass Textarea
glass-textarea
A liquid glass styled textarea with focus glow effects.
framer-motion1 file
Docs ↗
Glass Timeline
glass-timeline
A timeline component with glass morphism styling, suitable for displaying events or processes in a chronological order.
1 file
Docs ↗
Glass Tooltip
glass-tooltip
Contextual information popups with glass morphism styling and smooth animations on hover.
@radix-ui/react-tooltip1 file
Docs ↗
Glass Waveform
glass-waveform
An audio visualizer with liquid glass bars, gradient fills, and a frozen glass paused state.
1 file
Login Page
login-page
A complete login page with email and password authentication, password visibility toggle, remember me option, and social login buttons.
lucide-react1 file
Pricing Page
pricing-page
A modern pricing page with multiple plan tiers, billing toggle, feature comparison, FAQ section, and call-to-action buttons.
lucide-react1 file
Sign Up Page
signup-page
A complete sign up page with multi-step validation, password strength indicator, confirm password matching, and terms agreement checkbox.
lucide-react1 file
Stats Widgets
stats-widget
Statistics and metrics widgets for displaying data, comparisons, and progress with liquid glass styling.
lucide-react1 file
Docs ↗
Stock Widgets
stock-widget
Stock market widgets for displaying stock prices, trends, and news with liquid glass styling.
lucide-react1 file
Docs ↗
Weather Widgets
weather-widget
Weather widgets for displaying temperature, conditions, forecasts, and hourly data with liquid glass styling.
lucide-react1 file
Docs ↗

From the Ein UI readme

Ein UI — Liquid Glass Components (Shadcn Registry)

Welcome! Ein UI is a collection of beautiful, ready-made "liquid glass" components that you can preview, copy, and use in your website or app. This guide explains how to preview the components, get code snippets, and add a component to your project — no developer knowledge required.

✅ Great for: designers and frontend developers who want shareable, copy-and-paste UI components with consistent design patterns and built-in accessibility.

Key features

Collection of handcrafted, accessible components built on top of Radix UI primitives and Tailwind CSS v4 (TypeScript + React 19).
Components are distributed using the shadcn registry format — components are easy to install into other projects using the shadcn CLI.
Built-in documentation site and component previews (Next.js 16 + app router)
Example page templates / blocks (e.g., Admin Panel) to showcase layout patterns.
Zod validation examples and server/client component patterns for modern full-stack apps.

Quick links

Preview docs: Live preview
Registry JSON: Registry JSON
Try components: For details, see app/docs/components/*

Get started (local development)

Requirements: Node.js 20+ (recommended), pnpm (optional but used in this repo), or npm/yarn.

Clone the repo

git clone https://github.com/ehsanghaffar/ein-ui.git
cd ein-ui-shadcn-register

2 Install dependencies

# using pnpm
pnpm install

# or using npm
npm install

# or yarn
yarn install

3 Run development server

pnpm dev
# or npm run dev
# App runs on http://localhost:3000

Using Next.js 16.1.0 bundle analyzer

To analyze your Next.js bundle, you can use the built-in experimental analyzer:

pnpm analyze
# or npm run analyze

Contributing

Contributions welcome! Please read CONTRIBUTING.md and follow the issue and PR templates when submitting work.

Run pnpm lint to check code style
New components should include comprehensive examples under app/docs/components/* and should declare any required dependencies in registry.json

Where to find guidance:

Docs pages in the repo (https://ui.eindev.ir/docs) include live previews and code snippets.
Use shadcn registry format to make your component discoverable via the CLI.

Please also see CODE_OF_CONDUCT.md and SECURITY.md for reporting guidelines.

Support and help

If the repository is hosted on GitHub, open an issue on the repo or create a Pull Request to propose changes
For general usage of shadcn CLI ui.shadcn.com

Maintainers

Contributions are welcome — please open PRs and issues on the repo.

Read the rest on GitHub →

Registries like Ein UI

Magic UI

by Dillion Verma

components

coss

by coss

components

cult ui

by cult/ui

components

ReUI

by Sean Hello

components

Kokonut UI

by Kokonut Baffier

components

Browse every shadcn registry we track →

Ein UI contents

Glass Command Palette

Glass Spotlight

About Ein UI

Also in the Ein UI registry

Admin Panel

Base Widget

Calendar Widgets

Clock Widgets

Forgot Password Page

Glass Alert Dialog

Glass Avatar

Glass Badge

Glass Breadcrumb

Glass Button

Glass Card

Glass Checkbox

Glass Dialog

Glass Dock

Glass Gauge

Glass Input

Glass Morph Card

Glass Notification

Glass Orb

Glass Popover

Glass Progress

Glass Radio Group

Glass Ripple

Glass Scroll Area

Glass Select

Glass Separator

Glass Sheet

Glass Skeleton

Glass Slider

Glass Switch

Glass Table

Glass Tabs

Glass Textarea

Glass Timeline

Glass Tooltip

Glass Waveform

Login Page

Pricing Page

Sign Up Page

Stats Widgets

Stock Widgets

Weather Widgets

From the Ein UI readme

Ein UI — Liquid Glass Components (Shadcn Registry)

Key features

Quick links

Get started (local development)

Using Next.js 16.1.0 bundle analyzer

Contributing

Support and help

Maintainers

Registries like Ein UI

Related libraries

About Ein UI

All 2 Ein UI components