DripUI - Tailwind Components

DripUI is an amazing collection of free UI components to help you develop projects faster and easier.

The most elegant code for a component you want, is one click away :)

:computer: Site Overview

You can check out the live site here

To copy the code for a component, all you need to do is click on it :)

:hammer: Tech Stack

This project is a product of:

• Next.js
• Tailwindcss

:bulb: Want to contribute?

We would love that! That is what open source is all about :tada:

Found a typo on the site or this README file itself? Feature request? A bug? Feel free to raise an issue and we'll get to it. You can also try to fix the issue once you're assigned to it ;)

To see and/or contribute to this project, please follow the steps below.

:point_down: Prerequisites

Before installation, please make sure you have already installed the following tools:

• Nodejs
• npm

To check if you have nodejs and npm installed, run the commands: node -v and npm -v

:nut_and_bolt: Installation Steps

1) Fork this repository 2) Clone your fork of the repository 3) In your local dev environment, navigate to the project directory 4) Run npm install to install dependencies 5) Run npm run dev to start the server on https://localhost:3000

:wrench: Adding a component

• To add say, a new card component to existing card components, navigate to the /components folder.
• Inside the /components folder, you'll find the /drip folder.
• Existing component folders will be displayed inside /drip
• To add a new card, open the /cards components folder, and add your new component to the existing code
• Therefore, you would add the new card component code below the already existing ones.

:wrench: Adding a new type of an already existing component

• As you can see in the /cards folder, we can have different types of files representing different types of cards.
• To create a new type of card, say colored shadow cards, you would need to create a new file in the /cards folder called coloredShadowCard.js

Note

There is a naming convention when naming files. It is [component type] + [type]. coloredShadowCard.js mentioned above is a good example. coloredShadow = [component type] and Card = [type].

• Although we would appreciate contributions that help to expand the set of components we already have, we advise opening an issue where we can discuss if the new type of component you want to add is suitable for the collection.

:wrench: Adding a new collection of components

Say you wanted to add a new collection of components. Testimonials for example.

• In the /drip folder inside /components, create a new folder and give it the name of the new collection. That is /testimonials

• Inside the new collection folder, create new files corresponding to the type of testimonial components you want to add. Please refer to the naming convention mentioned here

• Before you add a collection, please open an issue to have a brief discussion on how components would be presented.

License

This project adopts the MIT License and is open to all contributions.

💪🏽 Thanks to all Contributors

Thanks a lot for spending your time helping DripUI grow. Thanks a lot! Keep being awesome🍻

🙏🏽 Support

This project needs a star️ from you. Don't forget to leave a star✨