Giter Club home page Giter Club logo

dripui's Introduction

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 :)

πŸ’» 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 :)

Screenshot of button components page on dripui

πŸ”¨ Tech Stack

This project is a product of:

πŸ’‘ Want to contribute?

We would love that! That is what open source is all about πŸŽ‰

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.

πŸ”© 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

πŸ”§ 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.

πŸ”§ 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.

πŸ”§ 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🍻

Contributors

πŸ™πŸ½ Support

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

dripui's People

Contributors

khazifire avatar elishaokon13 avatar dun-sin avatar njong392 avatar onyelaudochukwuka avatar jaivrat12 avatar kaartik2611 avatar michelle031 avatar zanottipaolo avatar mfonpeeter avatar rupali-codes avatar samyukthasudhakar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.