🚀 Elementra UI

✨ Overview

Elementra UI is a modern, reusable component library for React, Next.js, and beyond. Build stunning, accessible, and responsive UIs faster than ever—powered by Tailwind CSS and Framer Motion.

🎁 Features

• 🎨 Modern Design — Beautiful, consistent, and themeable components
• 📱 Responsive — Works seamlessly across all devices
• ♿ Accessible — WAI-ARIA standards for everyone
• 🎭 Animated — Smooth transitions with Framer Motion
• ⚡ Easy Integration — Plug-and-play with React/Next.js
• 🛠️ Customizable — Tailwind CSS for effortless theming

🧱 Available Components

| Component | Description | | -------------------------------- | ----------------------------- | | 🔘 Button | Versatile button styles | | 🎯 Alert | Informative alert banners | | 🏷️ Badge | Status and label badges | | 💳 Card | Flexible content containers | | 🖼️ Modal | Accessible modal dialogs | | 📊 Progress | Progress indicators | | 📝 Select | Custom select dropdowns | | 🔄 Switch | Toggle switches | | 📑 Tabs | Tabbed navigation | | 🍞 Toast | Toast notifications | | 🌟 Fancy Testimonials Slider | Animated testimonial carousel | | ✍️ React Signature | Signature pad input | | 🪄 Scratch to Reveal | Scratch-off effect component |

...and more coming soon!

📦 Installation

# With npm
npm install elementra-ui

# Or from GitHub Packages
npm install @waleedcodes/elementra-ui

⚡ Quick Start

1. Install peer dependencies:

   npm install clsx tailwind-merge

2. Add components using the CLI:

   npx elementra-ui add

   Use arrow keys to select, spacebar to multi-select, and enter to confirm.

3. Import and use in your app:

   import { Button } from "@/components/ui/button";
   
   export default function App() {
     return <Button variant="default">Click me</Button>;
   }

🎨 Tailwind CSS Setup

Add to your tailwind.config.js:

module.exports = {
  content: ["./src/components/**/*.{js,jsx}"],
  plugins: [require("tailwindcss-animate")],
};

📚 Documentation

Explore the full documentation for:

• Component APIs & props
• Interactive examples
• Theming & customization
• Best practices
• Migration guides

🤝 Community & Support

• 💬 GitHub Discussions
• 📺 YouTube Channel
• 🐦 Twitter
• 📝 Blog