Introduction

Elixir UI is a modern, fast, and lightweight component library for React applications. Built with Tailwind CSS and designed for speed, it provides beautiful, accessible components that you can copy and paste into your apps.

Features

🚀 Fast - Optimized for performance and quick integration
🎨 Modern - Contemporary design with Tailwind CSS
♿ Accessible - Built with accessibility in mind
📦 Lightweight - Minimal dependencies, maximum efficiency
🔧 Customizable - Easy to modify and extend
📱 Responsive - Mobile-first design approach

Philosophy

Elixir UI follows the principle of "copy and paste" components. Instead of installing a heavy package, you get the source code directly in your project, giving you full control over styling and behavior.

Tech Stack

React - For building user interfaces
Tailwind CSS - For styling and design system
Framer Motion - For smooth animations
clsx - For conditional class names

Quick Start

Get started with Elixir UI in less than 5 minutes:

1. Initialize Elixir UI in your project:

npx @elixir-labs/ui init

2. Add your first component:

npx @elixir-labs/ui add button

3. Use it in your React component:

import { Button } from "@/components/ui/button";

export default function MyComponent() {
  return <Button>Click me</Button>;
}

What's Next?

Ready to dive in? Check out the installation guide to set up Elixir UI in your project, or browse our component library to see what's available.

Elixir UI

Getting Started

Installation

Components