Elementra UI is a modern, reusable component library designed to simplify your workflow and accelerate the development of stunning, accessible, and responsive user interfaces. Built with React.js, Next.js, Tailwind CSS, and Framer Motion, Elementra empowers developers to craft beautiful UIs with ease.

• 🎨 Modern Design: Beautiful, consistent components following modern design principles
• 📱 Responsive: Fully responsive components that work across all devices
• ♿ Accessible: Built with accessibility in mind, following WAI-ARIA standards
• 🎭 Animations: Smooth animations powered by Framer Motion
• 🔧 JavaScript-Based: Built with vanilla JavaScript for maximum compatibility
• 🎨 Customizable: Easy theming and style customization with Tailwind CSS

• 🔘 Button
• 🎯 Alert
• 🏷️ Badge
• 💳 Card
• 🖼️ Modal
• 📊 Progress
• 📝 Select
• 🔄 Switch
• 📑 Tabs
• 🍞 Toast
• ... and more coming soon!

You can install Elementra UI using either npm or GitHub Packages:

# Using npm
npm install elementra-ui

# Using GitHub Packages
npm install @waleedcodes/elementra-ui

1. Install required dependencies:

npm install clsx tailwind-merge

2. Add components using the CLI:

npx elementra-ui add

Select components using the up/down arrow keys. Press spacebar to select multiple components, then press enter to add them to your src folder.

3. Import and use components:

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

export default function App() {
  return <Button variant="default">Click me</Button>;
}

Add this to your tailwind.config.js:

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

Visit our documentation website for:

• 📚 Component API references
• 💡 Interactive examples
• 🎨 Theme customization
• ⚡ Best practices
• 🔄 Migration guides

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