Elixir UI is a reusable component collection for modern React and Next.js projects. It provides polished, production-ready UI blocks and a CLI that helps you copy components directly into your app with the required internal files and dependencies.

Why Elixir UI

Copy-paste ownership: component code lives in your project
Ready-to-use components with clean APIs
Automatic dependency installation via CLI
Works with npm, pnpm, yarn, and bun

Quick Start

Run the Elixir UI CLI with a component name.
The CLI copies component files into your project.
Required dependencies are installed automatically.
Import and use the component in your app.

Install a Component

Choose your package manager and run one command:

npx @praveenlodhi/elixir-ui add action-button

pnpm dlx @praveenlodhi/elixir-ui add action-button

yarn dlx @praveenlodhi/elixir-ui add action-button

bun x @praveenlodhi/elixir-ui add action-button

Install Multiple Components

You can add more than one component in a single command:

npx @praveenlodhi/elixir-ui add motion-sidebar motion-gallery orbital-flow

pnpm dlx @praveenlodhi/elixir-ui add motion-sidebar motion-gallery orbital-flow

yarn dlx @praveenlodhi/elixir-ui add motion-sidebar motion-gallery orbital-flow

bun x @praveenlodhi/elixir-ui add motion-sidebar motion-gallery orbital-flow

What the CLI Adds

Component files in src/components/ui
Internal support files in folders like src/lib, src/hooks, and src/styles when needed
External npm packages required by selected components

Next Step

After installation, open the component documentation page and copy the usage example into your app.

Installation