Get started

Installation

Add Ein UI source to an existing React or Next.js project, then verify the first component before you customize it.

Before you begin

You need a project where shadcn can write component files. Ein UI does not replace your framework or CSS setup.

A React project with Tailwind CSS configured
shadcn initialized in the project
A current Node.js release supported by your project

Recommended: use the CLI

The CLI reads your project aliases and copies the selected registry item into the right location.

1. Initialize shadcn if you have not already

npx shadcn@latest init

2. Add the Ein UI registry to `components.json`

Merge this property into the existing `registries` object. Keep the rest of your configuration.

components.jsonjson

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

3. Add one component

npx shadcn@latest add @einui/glass-card

4. Import and render it

app/example.tsxtsx

import { GlassCard } from "@/components/liquid-glass/glass-card";
 
export function Example() {
  return <GlassCard>Content</GlassCard>;
}

If the component renders and its styles are present, installation is complete. Continue with theming when you are ready to make it yours.

Manual installation

Use a component’s source tab when you need to review or adapt the code before adding it. Install the dependencies listed on that component’s registry entry; they vary by component.

If installation fails

Check that `components.json` contains the exact https://ui.eindev.ir/r/{name}.json registry pattern.
Confirm your aliases point to the folders where shadcn should write files.
Install any dependency reported by the registry entry, then run the add command again.
Check that your configured CSS file matches the `tailwind.css` path in `components.json`.