DevUI icon indicating copy to clipboard operation
DevUI copied to clipboard

DevUI Components is a modern, open-source component library showcase built with shadcn/ui components. Perfect for developers who want to explore, copy, and reuse beautifully designed components in the...

✨ DevUI Components – Modern Shadcn Component Library Showcase

🌟 Stars 🍴 Forks 🐛 Issues 🔔 Open PRs 🔕 Closed PRs 🛠️ Languages 👥 Contributors
Stars Forks Issues Open PRs Closed PRs Languages Count Contributors Count

DevUI Components is a modern, open-source component library showcase built with shadcn/ui components. Perfect for developers who want to explore, copy, and reuse beautifully designed components in their React or Next.js projects. This library is GitHub-ready and perfect for Hacktoberfest 2025 contributions! 🚀

🌟 Features

  • Shadcn/UI Components with live previews
  • Syntax-highlighted code blocks for easy readability
  • One-click copy functionality to quickly grab code
  • Beautiful dark theme with purple/blue gradients and neon accents
  • Fully responsive design with smooth animations and hover effects
  • Search & filter components by category
  • GitHub-ready for open-source contributions

🎨 Design

  • Colors: Dark theme with neon purple/blue gradients
  • Typography: Modern, clean sans-serif fonts
  • Animations: Smooth fade-ins, hover glows, and subtle transitions
  • Layout: Hero section + component grid + live previews

⚡ Components Included

  • Buttons, Inputs, Cards, Avatars, Badges, and more
  • Each component comes with a live preview and copyable code

📌 Next Steps for Hacktoberfest 2025

  • Add more shadcn components (Tabs, Dialogs, Dropdowns, etc.)
  • Customize design colors, gradients, and animations
  • Connect the project to GitHub and start accepting contributions
  • Create labeled issues for Hacktoberfest contributors

💡 Contribution Guidelines

We welcome contributions from everyone! Whether you want to:

  • Add new components
  • Improve existing components
  • Fix bugs or enhance UI/UX
  • Suggest design improvements

…your contribution is valuable and can help this project grow!

🚀 How to Contribute

  1. Fork the repository
  2. Clone your fork locally
  3. Install dependencies:
npm install
  1. Run the project:
npm run dev
  1. Add your component or improvement
  2. Push your changes and create a pull request

GitHub Repository: https://github.com/fahimahammed/DevUI

Hacktoberfest 2025: Contribute, get PRs merged, and help us make DevUI Components the ultimate open-source component showcase!

👥 Contributors

Thanks to all the amazing contributors who make this project better! 💜


Contributions of any kind are welcome! 🎉