✨ UI Component Library Pro

A premium, animated, accessible React/Tailwind UI component library designed for the modern web.

Documentation • Components • Figma Kit • Discord

---

🎨 Visual Showcase

Form Elements	Glass Cards

Animated Modals	Navigation

---

⚡ Why choose UI Pro?

• 🎯 Copy & Paste Simplicity: No giant npm dependencies. Just beautiful code you truly own.
• 🌓 Perfect Dark Mode: Everything looks stunning in both light and dark environments with automatic system-preference detection.
• ♿ WAI-ARIA Compliant: Fully accessible components tested with screen readers.
• 📱 Responsive & Touch-Friendly: Designed for mobile-first with perfect tap targets.
• 🎨 Figma Synchronized: Comes with a pixel-perfect Figma UI kit for your designers.

---

🚀 Quick Start

1. Installation

# Using npm
npm install component-library-pro clsx tailwind-merge framer-motion

# Using pnpm
pnpm add component-library-pro clsx tailwind-merge framer-motion

# Using yarn
yarn add component-library-pro clsx tailwind-merge framer-motion

2. Configure Tailwind

Add the library to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/component-library-pro/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("tailwindcss-animate")],
}

3. Usage

import { GlassButton } from "component-library-pro";

export default function App() {
  return (
    <div className="flex h-screen items-center justify-center bg-zinc-950">
      <GlassButton variant="primary" pulse>
        Get Started
      </GlassButton>
    </div>
  );
}

---

📦 Available Components

Layout & Structure

 

• Container - Responsive constraint wrapper
• Grid - Advanced Bento-grid layouts
• GlassPanel - Frosted glass effect containers

Form Controls

 

• Input - Floating label text inputs
• Select - Custom styled dropdowns
• Switch - Animated toggle switches
• Checkbox - Accessible checked states

Feedback & Overlays

 

• Toast - Unobtrusive notifications
• Modal - Framer-motion powered dialogs
• Tooltip - Smart positioning hover labels

---

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

↑ Back to Top