Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/khazifire/dripui

DripUI a collection of free Tailwind CSS components to bootstrap your new apps, projects or landing sites!
https://github.com/khazifire/dripui

hacktoberfest hacktoberfest-accepted hacktoberfest2022 nextjs tailwind tailwind-components tailwind-css tailwindcss tailwindcss-components ui-components

Last synced: 3 days ago
JSON representation

DripUI a collection of free Tailwind CSS components to bootstrap your new apps, projects or landing sites!

Awesome Lists containing this project

README 

        
# 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](http://dripui.vercel.app/)



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



![Screenshot of button components page on dripui](https://user-images.githubusercontent.com/81039882/193884729-cda99fc7-e944-45f7-a24b-2545e0c516f6.png)



## :hammer: Tech Stack

This project is a product of:



- [Next.js](https://nextjs.org/)

- [Tailwindcss](https://tailwindcss.com/)



## :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](https://nodejs.org/en/download/package-manager)

- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-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](#note)



- 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](https://opensource.org/licenses/MIT) 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🍻



[![Contributors](https://contrib.rocks/image?repo=khazifire/DripUI)](https://github.com/khazifire/DripUI/graphs/contributors)



## 🙏🏽 Support



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