### Install next-themes Source: https://ui.eindev.ir/docs/dark-mode Install the required dependency for theme switching. ```bash npm install next-themes ``` -------------------------------- ### Diff Component Example Source: https://ui.eindev.ir/docs/cli An example demonstrating how to check for differences in the @einui/glass-button component. ```bash npx shadcn@latest diff @einui/glass-button ``` -------------------------------- ### Install Stock Widget Source: https://ui.eindev.ir/docs/components/stock-widget Use this command to install the stock widget package. Ensure you have shadcn-ui installed. ```bash npx shadcn@latest add @einui/stock-widget ``` -------------------------------- ### Install EinUI Sign Up Page Source: https://ui.eindev.ir/docs/blocks/signup Use this command to add the Sign Up Page block to your project. Ensure you have shadcn-ui installed. ```bash npx shadcn@latest add @einui/signup-page ``` -------------------------------- ### Install Liquid Glass Select Source: https://ui.eindev.ir/docs/components/glass-select Use the CLI to add the component to your project. ```bash npx shadcn@latest add @einui/glass-select ``` -------------------------------- ### Install Liquid Glass Dock Source: https://ui.eindev.ir/docs/components/glass-dock Use the CLI to add the component to your project. ```bash npx shadcn@latest add @einui/glass-dock ``` -------------------------------- ### Install Liquid Glass Table Source: https://ui.eindev.ir/docs/components/glass-table Use the CLI to add the component to your project. ```bash npx shadcn@latest add @einui/glass-table ``` -------------------------------- ### Install Components with Short Syntax Source: https://ui.eindev.ir/docs/cli After configuring the registry, you can install multiple Ein UI components using their short namespace. ```bash npx shadcn@latest add @einui/glass-card @einui/glass-button ``` -------------------------------- ### Install Liquid Glass Progress Source: https://ui.eindev.ir/docs/components/glass-progress Use the CLI to add the component to your project. ```bash npx shadcn@latest add @einui/glass-progress ``` -------------------------------- ### Install EinUI Login Page Block Source: https://ui.eindev.ir/docs/blocks/login Use this command to install the login page block. Ensure you have shadcn-ui installed. ```bash npx shadcn@latest add @einui/login-page ``` -------------------------------- ### Install Liquid Glass Tabs Source: https://ui.eindev.ir/docs/components/glass-tabs Use the CLI to add the component to your project. ```bash npx shadcn@latest add @einui/glass-tabs ``` -------------------------------- ### Install Liquid Glass Timeline Source: https://ui.eindev.ir/docs/components/glass-timeline Use the shadcn CLI to add the component to your project. ```bash npx shadcn@latest add @einui/glass-timeline ``` -------------------------------- ### Install EinUI Admin Panel Source: https://ui.eindev.ir/docs/blocks/admin Use this command to install the EinUI admin panel block. Ensure you have npx installed. ```bash npx shadcn@latest add @einui/admin-panel ``` -------------------------------- ### Install Liquid Glass Sheet Source: https://ui.eindev.ir/docs/components/glass-sheet Use the CLI to add the component to your project. ```bash npx shadcn@latest add @einui/glass-sheet ``` -------------------------------- ### Install Liquid Glass Ripple Source: https://ui.eindev.ir/docs/components/glass-ripple Use the CLI to add the component to your project. ```bash npx shadcn@latest add @einui/glass-ripple ``` -------------------------------- ### Install Calendar Widget Source: https://ui.eindev.ir/docs/components/calendar-widget Use this command to add the calendar widget to your project. Ensure you have shadcn installed. ```bash npx shadcn@latest add @einui/calendar-widget ``` -------------------------------- ### Basic Liquid Glass Tooltip Source: https://ui.eindev.ir/docs/components/glass-tooltip A simple example of the Liquid Glass Tooltip. Hover over the element to reveal the tooltip content. No specific imports are shown, implying it's a component that can be directly used after installation. ```jsx Hover me ``` -------------------------------- ### Install Liquid Glass Popover Source: https://ui.eindev.ir/docs/components/glass-popover Use this command to install the Liquid Glass Popover component. Ensure you have shadcn-ui installed. ```bash npx shadcn@latest add @einui/glass-popover ``` -------------------------------- ### Install Liquid Glass Notifications Source: https://ui.eindev.ir/docs/components/glass-notification Use the CLI to add the component to your project. ```bash npx shadcn@latest add @einui/glass-notification ``` -------------------------------- ### Install Liquid Glass Input Source: https://ui.eindev.ir/docs/components/glass-input Use the CLI command to add the component to your project. ```bash npx shadcn@latest add @einui/glass-input ``` -------------------------------- ### Install Glass Card Component Source: https://ui.eindev.ir/docs/components/glass-card Use this command to install the glass card component for React and Next.js projects. ```bash npx shadcn@latest add @einui/glass-card ``` -------------------------------- ### Install Liquid Glass Button Source: https://ui.eindev.ir/docs/components/glass-button Use the CLI to add the component to your project. ```bash npx shadcn@latest add @einui/glass-button ``` -------------------------------- ### Stock Ticker Example Source: https://ui.eindev.ir/docs/components/stock-widget Displays a scrolling stock ticker with price changes for a specific stock. Requires the stock widget to be installed. ```jsx AAPL +2.45 178.23 Apple Inc. +1.39% ``` -------------------------------- ### Install Liquid Glass Slider Source: https://ui.eindev.ir/docs/components/glass-slider Use this command to install the Liquid Glass Slider component via npm. ```bash npx shadcn@latest add @einui/glass-slider ``` -------------------------------- ### Install EinUI Pricing Page Block Source: https://ui.eindev.ir/docs/blocks/pricing Use this command to add the EinUI Pricing Page block to your project. Ensure you have shadcn-ui installed. ```bash npx shadcn@latest add @einui/pricing-page ``` -------------------------------- ### Install Liquid Glass Alert Dialog Source: https://ui.eindev.ir/docs/components/glass-alert-dialog Use this command to install the Liquid Glass Alert Dialog component for React & Next.js. ```bash npx shadcn@latest add @einui/glass-alert-dialog ``` -------------------------------- ### Install Weather Widget Source: https://ui.eindev.ir/docs/components/weather-widget Use the CLI to add the weather widget component to your project. ```bash npx shadcn@latest add @einui/weather-widget ``` -------------------------------- ### Install Liquid Glass Separator Source: https://ui.eindev.ir/docs/components/glass-separator Use the CLI command to add the component to your project. ```bash npx shadcn@latest add @einui/glass-separator ``` -------------------------------- ### Install components via CLI Source: https://ui.eindev.ir/docs/registry Use the shadcn CLI to add specific components to your project. ```bash npx shadcn@latest add @ein/glass-card ``` ```bash npx shadcn@latest add https://ui.eindev.ir/api/r/glass-card ``` -------------------------------- ### Install Liquid Glass Morph Card Source: https://ui.eindev.ir/docs/components/glass-morph-card Use the CLI to add the component to your project. ```bash npx shadcn@latest add @einui/glass-morph-card ``` -------------------------------- ### Install Liquid Glass Gauge Source: https://ui.eindev.ir/docs/components/glass-gauge Use the shadcn CLI to add the component to your project. ```bash npx shadcn@latest add @einui/glass-gauge ``` -------------------------------- ### Install Stats Widget Source: https://ui.eindev.ir/docs/components/stats-widget Use the CLI to add the stats widget component to your project. ```bash npx shadcn@latest add @einui/stats-widget ``` -------------------------------- ### Install Glass Avatar Component Source: https://ui.eindev.ir/docs/components/glass-avatar Use this command to install the liquid glass avatar component for React and Next.js projects. ```bash npx shadcn@latest add @einui/glass-avatar ``` -------------------------------- ### Install Liquid Glass Dialogs Source: https://ui.eindev.ir/docs/components/glass-dialog Use this command to add the @einui/glass-dialog package to your project. ```bash npx shadcn@latest add @einui/glass-dialog ``` -------------------------------- ### Install Forgot Password Page Source: https://ui.eindev.ir/docs/blocks/forgot-password Use this command to add the Forgot Password Page component to your project. Ensure you have shadcn-ui installed. ```bash npx shadcn@latest add @einui/forgot-password-page ``` -------------------------------- ### Install Clock Widget Component Source: https://ui.eindev.ir/docs/components/clock-widget Use the CLI to add the clock widget component to your project. ```bash npx shadcn@latest add @einui/clock-widget ``` -------------------------------- ### Install Glass Badge Component Source: https://ui.eindev.ir/docs/components/glass-badge Use this command to add the glass-badge component to your React or Next.js project. Ensure you have npx installed. ```bash npx shadcn@latest add @einui/glass-badge ``` -------------------------------- ### Configure components.json Source: https://ui.eindev.ir/docs/registry Add the Ein UI registry URL to your project's components.json file to enable component installation. ```json "registries": { "@einui": "https://ui.eindev.ir/api/r/{name}" } ``` -------------------------------- ### Install Liquid Glass Tooltip Source: https://ui.eindev.ir/docs/components/glass-tooltip Use this command to add the Liquid Glass Tooltip component to your project. Ensure you are using npx shadcn. ```bash npx shadcn@latest add @einui/glass-tooltip ``` -------------------------------- ### Content List Scroll Area Example Source: https://ui.eindev.ir/docs/components/glass-scroll-area Displays a scrollable list of content, such as user profiles or items. This example shows a list of artists with their usernames. ```jsx import { ScrollArea } from "@/components/ui/scroll-area"; const artists = [ { imageSrc: "https://i.pravatar.cc/48", name: "Ornella Binni", username: "@ornellabinni", }, { imageSrc: "https://i.pravatar.cc/48", name: "Tom Byrom", username: "@tombyrom", }, { imageSrc: "https://i.pravatar.cc/48", name: "Vladimir Malyavko", username: "@vmalyavko", }, { imageSrc: "https://i.pravatar.cc/48", name: "Joao Silas", username: "@joaosilas", }, { imageSrc: "https://i.pravatar.cc/48", name: "Liam Charmer", username: "@liamcharmer", }, { imageSrc: "https://i.pravatar.cc/48", name: "Julien Maillot", username: "@julienmaillot", }, ]; type Artist = { imageSrc: string; name: string; username: string; }; export function ScrollAreaScrollHideDemo() { return (

Artists

{artists.map((artist) => (

{artist.name}

{artist.username}

))}
); } ``` -------------------------------- ### Install Glass Command Palette Source: https://ui.eindev.ir/docs/components/glass-command-palette Use this command to add the glass command palette to your project. Ensure you are using shadcn UI. ```bash npx shadcn@latest add @einui/glass-command-palette ``` -------------------------------- ### Configure Ein UI Registry Source: https://ui.eindev.ir/docs/cli Add the Ein UI registry namespace to your `components.json` file for simplified component installation. ```json { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "registries": { "@einui": "https://ui.eindev.ir/r/{name}" } } ``` -------------------------------- ### Install Liquid Glass Switch Source: https://ui.eindev.ir/docs/components/glass-switch Use this command to add the Liquid Glass Switch component to your React or Next.js project. ```bash npx shadcn@latest add @einui/glass-switch ``` -------------------------------- ### Install Glass Breadcrumb Source: https://ui.eindev.ir/docs/components/glass-breadcrumb Use this command to add the glass breadcrumb component to your project. ```bash npx shadcn@latest add @einui/glass-breadcrumb ``` -------------------------------- ### Install Liquid Glass Textarea Source: https://ui.eindev.ir/docs/components/glass-textarea Use this command to add the Liquid Glass Textarea component to your React or Next.js project. ```bash npx shadcn@latest add @einui/glass-textarea ``` -------------------------------- ### Portfolio Overview Example Source: https://ui.eindev.ir/docs/components/stock-widget Presents a summary of a stock portfolio, including total value, percentage change, and details of individual holdings like shares and current value. ```jsx ### Portfolio $125,430.5 +3.24% AAPL 100 shares $17823.00 +18.82% MSFT 50 shares $18945.50 +26.30% GOOGL 25 shares $3545.00 +18.17% ``` -------------------------------- ### Basic Switch Example Source: https://ui.eindev.ir/docs/components/glass-switch A simple toggle switch for managing boolean settings. This component is ready to use for binary options. ```jsx ``` -------------------------------- ### Crypto Widget Example Source: https://ui.eindev.ir/docs/components/stock-widget Displays cryptocurrency prices, including Bitcoin, with percentage change, current price, market cap, and volume. Useful for real-time crypto tracking. ```jsx BTC Bitcoin +2.34% $43,250.45 MCap: $845BVol: $28.4B ``` -------------------------------- ### Switch States Example Source: https://ui.eindev.ir/docs/components/glass-switch Demonstrates switches in various states, including enabled and disabled. Use these to represent different notification or setting preferences. ```jsx ``` -------------------------------- ### Install Liquid Glass Radio Source: https://ui.eindev.ir/docs/components/glass-radio Use this command to add the Liquid Glass Radio component to your React or Next.js project. ```bash npx shadcn@latest add @einui/glass-radio ``` -------------------------------- ### Basic Popover Example Source: https://ui.eindev.ir/docs/components/glass-popover A simple implementation of the Liquid Glass Popover. This component provides a floating panel for displaying contextual content. ```jsx import { Popover, PopoverTrigger, PopoverContent } from "@einui/glass-popover"; function BasicPopover() { return ( Open Popover Place content for the popover here. ); } ``` -------------------------------- ### Configure Ein Registry in components.json Source: https://ui.eindev.ir/docs/installation Add the Ein UI registry namespace to your components.json file to enable installation using the namespace. ```json { "registries": { "@einui": "@einui/{name}" } } ``` -------------------------------- ### Install Liquid Glass Checkbox Source: https://ui.eindev.ir/docs/components/glass-checkbox Use this command to add the Liquid Glass Checkbox component to your React or Next.js project. ```bash npx shadcn@latest add @einui/glass-checkbox ``` -------------------------------- ### Settings Panel with Switches Source: https://ui.eindev.ir/docs/components/glass-switch An example of how to integrate multiple switches into a settings panel for managing various application preferences. Each switch controls a distinct setting. ```jsx
``` -------------------------------- ### Popover Alignment Examples Source: https://ui.eindev.ir/docs/components/glass-popover Demonstrates how to control the positioning of the popover relative to its trigger element. Various alignment options are available. ```jsx import { Popover, PopoverTrigger, PopoverContent } from "@einui/glass-popover"; function AlignedPopover() { return (
Start Content aligned to the start. Center Content aligned to the center. End Content aligned to the end.
); } ``` -------------------------------- ### Market Overview Example Source: https://ui.eindev.ir/docs/components/stock-widget Provides an overview of major market indices like S&P 500, Dow Jones, and NASDAQ, along with their current values and percentage changes. ```jsx ### Market Overview S&P 500 4,783.450.49% Dow Jones 37,440.340.12% NASDAQ 15,043.970.69% ``` -------------------------------- ### Install Glass Skeleton Component Source: https://ui.eindev.ir/docs/components/glass-skeleton Use this command to add the liquid glass skeleton component to your React or Next.js project. This component serves as a placeholder for content that is being fetched. ```bash npx shadcn@latest add @einui/glass-skeleton ``` -------------------------------- ### Basic Dialog Example Source: https://ui.eindev.ir/docs/components/glass-dialog A simple modal dialog for focused user interactions. This component is ready to be used in your React or Next.js application. ```jsx import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" export function DialogClose() { return ( Edit profile Make changes to your profile here. Click save, when you're done.
) } ``` -------------------------------- ### Settings Dialog Example Source: https://ui.eindev.ir/docs/components/glass-dialog A dialog component configured with multiple form elements for detailed settings adjustments. Ensure all necessary form elements and state management are implemented. ```jsx import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export function DialogDemo() { return ( Edit profile Make changes to your profile here. Click save, when you're done.
) } ``` -------------------------------- ### Compact Stock Card Example Source: https://ui.eindev.ir/docs/components/stock-widget Shows a compact view of stock information including price change percentage and current price. Suitable for limited space displays. ```jsx TSLA1.29% $245.67 ``` -------------------------------- ### Install Liquid Glass Scroll Area Source: https://ui.eindev.ir/docs/components/glass-scroll-area Use this command to add the Liquid Glass Scroll Area component to your React or Next.js project. ```bash npx shadcn@latest add @einui/glass-scroll-area ``` -------------------------------- ### Basic Checkbox - EinUI Source: https://ui.eindev.ir/docs/components/glass-checkbox A standard checkbox component with a label for boolean selections. Ensure you have installed the component using the provided command. ```jsx ``` -------------------------------- ### Horizontal Scroll Area Example Source: https://ui.eindev.ir/docs/components/glass-scroll-area Provides a horizontally scrollable container for content that spans wider than the container. Use this for displaying items side-by-side. ```jsx import { ScrollArea } from "@/components/ui/scroll-area"; const tags = Array.from({ length: 10 }).map( (_, i, arr) => `Item ${arr.length - i}` ); export function ScrollAreaHorizontalDemo() { return (
{tags.map((tag) => (
{tag}
))}
); } ``` -------------------------------- ### Slider with Labels - EinUI Source: https://ui.eindev.ir/docs/components/glass-slider Slider component displaying the current value. This example shows how to render the slider with its associated value label. ```jsx ``` -------------------------------- ### Vertical Scroll Area Example Source: https://ui.eindev.ir/docs/components/glass-scroll-area Demonstrates a vertical scrollable container for long content lists. Ensure your content exceeds the container height to observe the scrollbar. ```jsx import { ScrollArea } from "@/components/ui/scroll-area"; const tags = Array.from({ length: 15 }).map( (_, i, arr) => `Tag ${arr.length - i}` ); export function ScrollAreaHorizontalDemo() { return (

Tags

{tags.map((tag) => (
{tag}
))}
); } ``` -------------------------------- ### Trigger Button for Command Palette Source: https://ui.eindev.ir/docs/components/glass-command-palette A styled trigger button that includes a visual hint for the keyboard shortcut to open the command palette. This example shows a button that opens the command palette. ```jsx import { CommandPalette, CommandPaletteInput, CommandPaletteList, CommandPaletteItem, CommandPaletteTrigger, } from "@einui/glass-command-palette"; function App() { return ( Item 1 Item 2 ); } ``` -------------------------------- ### Initialize Shadcn CLI Source: https://ui.eindev.ir/docs/cli Run this command to set up the Shadcn CLI in your project if you haven't already. ```bash npx shadcn@latest init ``` -------------------------------- ### Registry Index URL Source: https://ui.eindev.ir/docs/registry The full registry manifest containing all available components. ```text https://ui.eindev.ir/r/registry.json ``` -------------------------------- ### Add Component Command Usage Source: https://ui.eindev.ir/docs/cli The general usage for adding any component using the Shadcn CLI. ```bash npx shadcn@latest add [component] ``` -------------------------------- ### Configure Recommended Background Source: https://ui.eindev.ir/docs/dark-mode Apply this CSS to your application background to support the liquid glass aesthetic. ```css /* Recommended background */ .app-background { background: linear-gradient( to bottom right, #0f172a, /* slate-900 */ #1e1b4b, /* purple tint */ #0f172a /* slate-900 */ ); } ``` -------------------------------- ### Add Multiple Ein UI Components Source: https://ui.eindev.ir/docs/installation Use this command to add multiple Ein UI components to your project simultaneously via the Shadcn CLI. ```bash npx shadcn@latest add @einui/glass-button @einui/glass-input ``` -------------------------------- ### Diff Component Command Usage Source: https://ui.eindev.ir/docs/cli The general usage for checking differences between local and remote components. ```bash npx shadcn@latest diff [component] ``` -------------------------------- ### Add Ein UI Component Source: https://ui.eindev.ir/docs/cli Use this command to add a specific Ein UI component, such as the glass card, to your project. ```bash npx shadcn@latest add @einui/glass-card ``` -------------------------------- ### Create Theme Provider Component Source: https://ui.eindev.ir/docs/dark-mode Wrap your application with the ThemeProvider to enable theme switching. ```tsx // components/theme-provider.tsx "use client" import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" export function ThemeProvider({ children, ...props }) { return ( {children} ) } ``` -------------------------------- ### Basic Command Palette Usage Source: https://ui.eindev.ir/docs/components/glass-command-palette A searchable command palette with keyboard navigation. Press Cmd/Ctrl+K to toggle. This is the default centered position. ```jsx import { CommandPalette } from "@einui/glass-command-palette"; function App() { return ( Item 1 Item 2 ); } ``` -------------------------------- ### Basic Radio Group - EinUI Source: https://ui.eindev.ir/docs/components/glass-radio Demonstrates a basic radio group for single selection. Ensure proper state management for selected options. ```jsx Option 1 Option 2 Option 3 ``` -------------------------------- ### Configure Light Mode Variables Source: https://ui.eindev.ir/docs/dark-mode Define CSS variables to adjust the appearance when light mode is active. ```css .light { --glass-bg: rgba(0, 0, 0, 0.03); --glass-border: rgba(0, 0, 0, 0.08); --text-primary: rgba(0, 0, 0, 0.9); --text-secondary: rgba(0, 0, 0, 0.6); /* Softer glows for light mode */ --glow-cyan: rgba(6, 182, 212, 0.15); --glow-purple: rgba(147, 51, 234, 0.15); } ``` -------------------------------- ### Avatar Sizes Source: https://ui.eindev.ir/docs/components/glass-avatar Demonstrates different avatar sizes (SM, MD, LG, XL) for adapting to various UI contexts. Select the appropriate size based on your design requirements. ```jsx SM MD LG XL ``` -------------------------------- ### Basic Skeleton Shapes Source: https://ui.eindev.ir/docs/components/glass-skeleton EinUI offers various skeleton shapes for different content types, providing a placeholder loading experience. ```jsx ``` -------------------------------- ### Liquid Glass Tooltip Positions Source: https://ui.eindev.ir/docs/components/glass-tooltip Demonstrates different positioning options for the Liquid Glass Tooltip. This allows you to control where the tooltip appears relative to the trigger element. ```jsx Top ``` ```jsx Bottom ``` ```jsx Left ``` -------------------------------- ### Delete Confirmation Dialog Source: https://ui.eindev.ir/docs/components/glass-alert-dialog Implement a confirmation dialog for destructive actions like account deletion. Ensure user intent before proceeding. ```jsx PreviewCode Delete Account ``` -------------------------------- ### Compact Calendar Widget Source: https://ui.eindev.ir/docs/components/calendar-widget A compact calendar widget displaying the current date and a monthly overview. Useful for quick date reference. ```jsx Apr 2026 S M T W T F S 123456789101112131415161718192021222324252627282930 Jan 2025 S M T W T F S 12345678910111213141516171819202122232425262728293031 ``` -------------------------------- ### Define Ein UI CSS Variables Source: https://ui.eindev.ir/docs/theming Set global CSS variables for theming, including glass effect properties, glow colors, and text colors. These variables are defined in the root scope for easy access. ```css :root { /* Glass Effect Variables */ --glass-bg: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.1); --glass-blur: 16px; /* Glow Colors */ --glow-cyan: rgba(6, 182, 212, 0.3); --glow-purple: rgba(147, 51, 234, 0.3); --glow-pink: rgba(236, 72, 153, 0.3); /* Text Colors */ --text-primary: rgba(255, 255, 255, 0.95); --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.5); } ``` -------------------------------- ### Basic Liquid Glass Textarea Source: https://ui.eindev.ir/docs/components/glass-textarea A simple multi-line text input component. Suitable for longer form content where a label is not immediately necessary. ```jsx