⚡
EINCODE
>Home>Projects>Workbench>Blog
GitHubTwitterLinkedIn
status: building
>Home>Projects>Workbench>Blog
status: building

Connect

Let's build something together

Always interested in collaborations, interesting problems, and conversations about code, design, and everything in between.

send a signal→

Find me elsewhere

GitHub
@ehsanghaffar
Twitter
@ehsanghaffar
LinkedIn
/in/ehsanghaffar
Email
hello@ehsanghaffar.dev
Forged with& code

© 2026 EINCODE — All experiments reserved

back to blog
UI Libraries

Ein UI Liquid Glass UI

Exploring the sleek and modern Liquid Glass UI design trend in Ein UI.

EG

Ehsan Ghaffar

2024-06-157 min
#Ein UI#Liquid Glass UI#React#UI Design

Ein UI Liquid Glass UI For React

EinUI started as a small visual experiment—and slowly became the component library I kept wishing existed every time I started a new project.

It’s a liquid‑glass UI library for React and Next.js, designed to help you build visually rich dashboards and applications without sacrificing developer experience or control.


Why I built EinUI

For years, I found myself rebuilding the same UI patterns again and again: cards, buttons, dashboards, and small widgets with blur, glow, and glassmorphism effects.

Each time, I faced the same choice:

  • Ship fast, and settle for visually plain UI
  • Make it beautiful, and spend hours tuning shadows, gradients, motion, and accessibility

EinUI is my answer to that trade‑off.

It’s a ready‑to‑use set of liquid‑glass components that still lets you see, copy, and control every line of code. No locked‑in design system. No opaque abstractions. Just clean, composable components you can adapt to your own product.

EinUI is open‑source, Shadcn‑compatible, and built for developers who care about both aesthetics and maintainability.


What “liquid glass” means in EinUI

In EinUI, liquid glass is more than blur plus transparency.

It’s a combination of three ideas:

  • Subtle depth — layered surfaces that feel physical, not flat
  • Glowing accents — restrained highlights that guide attention
  • Responsive motion — interactions that feel alive without becoming distracting

You’ll see this across components like Glass Card, Glass Button, and Glass Input. They rely on backdrop blur, soft gradients, and animated glows that respond naturally to hover, focus, and state changes.

The goal is to make dashboards feel like floating glass panels layered over content, while staying responsive, accessible, and production‑ready.


Built on tools I already trust

EinUI doesn’t try to reinvent the React ecosystem. Instead, it builds on tools I already use daily in real projects:

  • Shadcn‑compatible registry Install components directly using the Shadcn CLI via a custom registry.

  • Tailwind CSS v4 Styling is powered by Tailwind v4, CSS variables, and the new theming system—fast, flexible, and easy to customize.

  • Radix UI patterns Components follow established Radix patterns for keyboard navigation and accessibility.

  • TypeScript‑first Full TypeScript support with exported types for strong autocompletion and safety.

This means you can drop EinUI into an existing Shadcn + Tailwind setup without fighting your tooling or rewriting your stack.


Components available today

EinUI started with a few glass cards and quickly grew into a small but focused ecosystem of components.

Base components

  • Glass Card
  • Glass Button
  • Glass Input
  • Glass Tabs
  • Glass Dialog
  • Glass Badge
  • Glass Avatar
  • Glass Progress
  • Glass Switch
  • Glass Slider
  • Glass Tooltip

Advanced components

Morph cards, ripples, timelines, gauges, docks, and other pieces designed for richer layouts and interactive dashboards.

Widgets and blocks

Calendar, clock, weather, stocks, and full‑page blocks—like a complete sign‑up flow—built entirely from EinUI components.

The live preview dashboard shows how these pieces come together in real‑world layouts. The library currently includes around 19 components and is under active development.


Getting started

EinUI is designed to feel familiar from the first five minutes—especially if you already use Shadcn.

  1. Add the EinUI registry to your components.json file

  2. Install a component, for example:

    npx shadcn@latest add @einui/glass-card
  3. Install multiple components as needed for forms, dashboards, or layouts

  4. Customize colors, glow intensity, and surface depth using CSS variables

From there, everything is yours to inspect, refactor, or completely reshape.

EinUI is meant to be a strong starting point, not a black box.


If you enjoy building visually rich UIs without sacrificing developer experience, EinUI is an experiment—and a library—I’m actively evolving alongside my own projects.

Explore the docs and live previews: https://ui.eindev.ir

share
share: