YourCSS is a modern, open-source component library showcasing beautiful CSS designs and animations. Our mission is to provide developers with ready-to-use, customizable CSS components that enhance web applications with minimal effort.

• 80+ Pre-built Components: Buttons, cards, forms, loaders, and more
• Copy & Paste Ready: Get the code with a single click
• Live Preview: Interact with components before using them
• Responsive Design: All components are mobile-friendly
• Dark Mode Support: Built-in light/dark themes
• Zero Dependencies: Pure CSS solutions - no external libraries required
• Customization: Easy-to-modify variables for your brand colors
• TypeScript Support: Full type definitions included
• Accessibility: WCAG 2.1 compliant components

• 🔘 Buttons & Links - 15 variations
• 📝 Forms & Inputs - 12 designs
• 🎴 Cards & Containers - 10 styles
• 🔄 Loaders & Spinners - 8 animations
• 💫 Hover Effects - 20+ animations
• 🌊 Background Effects - 8 patterns
• 🎭 3D Elements - 5 components
• 📱 Responsive Layouts - 5 templates

• Node.js 18.x or later
• npm or yarn
• Git

1. Clone the repository

   git clone https://github.com/Arihant2312/yourcss.git cd yourcss

2. Install dependencies

   npm install # or yarn install

3. Run development server

   npm run dev # or yarn dev

4. Open browser Visit http://localhost:3000

npm run build npm start # or yarn build yarn start

yourcss/ ├── public/ # Static assets │ ├── cssCode/ # CSS component files │ ├── formCode/ # HTML form templates │ └── htmlCode/ # HTML component files ├── src/ │ ├── app/ # Next.js app router pages │ ├── components/ # React components │ │ ├── ui/ # UI components │ │ └── CssEntity/ # CSS preview components │ ├── contexts/ # React contexts │ └── lib/ # Utility functions ├── .github/ # GitHub configuration └── docs/ # Documentation 

We love your input! We want to make contributing to YourCSS as easy and transparent as possible. Please read our Contributing Guidelines before submitting any contributions.

1. 🐛 Report bugs or request features using GitHub issues
2. 🎨 Submit new CSS components by following our component guidelines
3. � Improve documentation - fix typos, clarify explanations, add examples
4. 💡 Share ideas for new features or improvements
5. ⭐ Star the project to show your support

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-component)
3. Add your component files to the appropriate directories
4. Update the component registry if needed
5. Commit your changes (git commit -m 'Add some amazing component')
6. Push to the branch (git push origin feature/amazing-component)
7. Open a Pull Request

1. Fork this repository
2. Sign up on Vercel
3. Import your forked repository
4. Vercel will automatically detect Next.js and configure the build
5. Deploy and get your live URL

1. Build the project:

   npm run build

2. Start the production server:

   npm start

3. Configure your web server to serve the .next directory

NEXT_PUBLIC_SITE_URL=your-site-url NEXT_PUBLIC_GA_ID=your-analytics-id # Optional

• Component Guidelines
• Contribution Guide
• Code of Conduct
• License

• Thanks to all our contributors
• Built with Next.js and TailwindCSS
• Deployed on Vercel

Follow these steps to run YourCSS locally on your machine:

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn package manager

1️⃣ Clone the repository

git clone https://github.com/Gyanthakur/yourcss_contribution.git

2️⃣ Navigate to the project directory

cd yourcss_contribution

3️⃣ Install dependencies

npm install # or yarn install

4️⃣ Run the development server

npm run dev # or yarn dev

5️⃣ Open in browser

Navigate to 👉 http://localhost:3000 to view the project locally.

npm run build npm start

We love contributions! 🎉 YourCSS is an open-source project, and we welcome developers of all skill levels to contribute.

1. Fork this repository
2. Clone your forked repository
3. Create a new branch (git checkout -b feature/amazing-feature)
4. Make your changes and commit (git commit -m 'Add some amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

For detailed guidelines on how to contribute, please read our CONTRIBUTING.md file.

This project is participating in Hacktoberfest 2025! We welcome quality contributions that follow our guidelines. Make sure to:

• Read the contribution guidelines carefully
• Create meaningful pull requests
• Follow the code of conduct
• Be respectful and collaborative

Join our growing community of developers! 🌟

• 📖 Contributing Guidelines – Learn how to contribute
• 📜 Code of Conduct – Our community standards
• 🐛 Report Issues – Help us improve
• 💡 Request Features – Share your ideas

• 📲 WhatsApp: Join our community
• 📧 Email: gps.96169@gmail.com

Have questions, suggestions, or just want to say hi? 👋

📲 WhatsApp: Click Here

📧 Email: gps.96169@gmail.com

💼 GitHub: @Gyanthakur

This project is licensed under the MIT License – see the LICENSE file for details.

MIT License - feel free to use this project for personal or commercial purposes! 

A big thank you to everyone who has contributed to making YourCSS better! 💖

Thanks to all the amazing people who have contributed to this project:

• Next.js Team – For the incredible framework
• Tailwind CSS – For making styling a breeze
• Vercel – For seamless deployment
• Hacktoberfest – For promoting open source
• All our contributors – For your valuable time and effort

This project was inspired by the need for a centralized, easy-to-use platform where developers can discover and implement beautiful CSS designs without the hassle.

z

If you find YourCSS helpful, please consider giving it a star! ⭐

Your support motivates us to keep improving and adding more features. 🚀

• ⭐ Show appreciation for the work
• 📈 Help others discover this project
• 🔔 Stay updated with new features
• 💪 Support open source development