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

Related tags

Learning resource nextjs ui-components hacktoberfest tailwind tailwindcss tailwind-css tailwind-components hacktoberfest-accepted tailwindcss-components hacktoberfest2022
Overview

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 ✨

Comments
  • Created Navbar Components

    Created Navbar Components

    🛠️ Fixes Issue

    closes #17

    👨‍💻 Changes proposed

    • Added 12 new Navbars
    • Removed the coming soon label

    ✔️ Check List (Check all the applicable boxes)

    • [x] My code follows the code style of this project.
    • [x] This PR does not contain plagiarized content.
    • [x] The title of my pull request is a short description of the requested changes.

    📄 Note to reviewers

    📷 Screenshots

    hacktoberfest hacktoberfest-accepted 
    opened by Onyelaudochukwuka 7
  • [FEATURE] Create Drip CLI for managing components

    [FEATURE] Create Drip CLI for managing components

    New Features

    What is the new or updated feature that you are suggesting?

    Create a lightweight that facilitates the creation, modification, and management of components

    • This will remove the need for navigating in and out of folders. The CLI will take care of putting the generated components in the required folders

    • Something like: drip generate card component-name drip generate button component-name and so on

    I'd love to work on this if you approve @khazifire

    enhancement 
    opened by slim-codes 6
  • Added some margin on the sides according to issue: #7

    Added some margin on the sides according to issue: #7

    This Pull request resolves issue #7

    • Margins were added to both the left and right side of the desktop view
    • Mobile view was not affected
    • The below screenshot shows the changes made
    • Closes #7

    image

    opened by DugarRishab 6
  • feat: make mobile nav bar

    feat: make mobile nav bar

    🛠️ Closes #15

    👨‍💻 Changes proposed

    • Make mobile navbar
    • create useClickOutside hook for when the rest of the page is clicked
    • create useWindowsDimensions hook to check the view width

    ✔️ Check List (Check all the applicable boxes)

    • [x] My code follows the code style of this project.
    • [x] This PR does not contain plagiarized content.
    • [x] The title of my pull request is a short description of the requested changes.

    📄 Note to reviewers

    📷 Screenshots

    hacktoberfest hacktoberfest-accepted 
    opened by Dun-sin 5
  • Header component not vertically aligned

    Header component not vertically aligned

    Drip UI Header Component)

    I noticed the contents of the header component are not vertically aligned in the mobile view. That is the menu icon on the right is not vertically aligned with the contents on the left. Please could I be assigned this issue under hacktoberfest.

    enhancement hacktoberfest 
    opened by mfonPeeter 3
  • Remove the hover effect on the (created with love by) on the footer.

    Remove the hover effect on the (created with love by) on the footer.

    When we hover on the text in the footer, it seems like the hover effect is appearing all over the text. Instead, make it work only on your username (@khazifire )

    hacktoberfest 
    opened by sainathd07 3
  • Created a new Component

    Created a new Component

    🛠️ Fixes Issue

    Closes #17

    👨‍💻 Changes proposed

    • Fixed a bug on the previous PR
    • Created a Footer as well
    • Created a new StickyHeader

    ✔️ Check List (Check all the applicable boxes)

    • [x] My code follows the code style of this project.
    • [x] This PR does not contain plagiarized content.
    • [x] The title of my pull request is a short description of the requested changes.

    📄 Note to reviewers

    #33

    hacktoberfest hacktoberfest-accepted 
    opened by Elishaokon13 2
  • Created StickyHeader

    Created StickyHeader

    🛠️ Fixes Issue

    #17 fixed

    👨‍💻 Changes proposed

    • Created a new component in the Header folder named StickyHeader.js
    • Created a new Footer as well.

    ✔️ Check List (Check all the applicable boxes)

    • [x] My code follows the code style of this project.
    • [x] This PR does not contain plagiarized content.
    • [x] The title of my pull request is a short description of the requested changes.

    📄 Note to reviewers

    • Fixes #17
    • Created a Footer with logo, but directory to logo is not found, please review
    opened by Elishaokon13 2
  • [BUG] Items overlapping the Navbar

    [BUG] Items overlapping the Navbar

    What is the current behavior?

    Components overlapping Navbar

    Steps to Reproduce

    If the current behavior is a bug, if possible please provide the steps to reproduce.

    What is the expected behavior?

    The expected behavior is that Components shouldn't overlap Navbar

    What should DripUI do ?

    Adding a z-index and bg-white will resolve this.

    Screenshot

    image

    bug 
    opened by rupali-codes 2
  • Avoid Getting Element Directly From The Dom In React

    Avoid Getting Element Directly From The Dom In React

    Screen Shot 2022-10-02 at 3 51 17 PM This should be fixed with the e(event) keyword which is an inbuilt method for such tasks rather than getting the element directly from the D.O.M. I'l love to fix this if assigned to me

    hacktoberfest 
    opened by Onyelaudochukwuka 2
  • feat(bin/index.js): create lightweight CLI for managing DripUI components

    feat(bin/index.js): create lightweight CLI for managing DripUI components

    🛠️ Fixes Issue

    • Closes #25

    👨‍💻 Changes proposed

    • create CLI for creating, modifying, and managing the DripUI components interactively
    • include demo video for using CLI in dripCLI documentation.
    • use only 2 dependencies ATM (inquirer & ansi-colors)
    • add prettier to enforce consistent coding style (will only apply to the js files).
    • bump version (minor semver upgrade). Reason: CLI feat has been implemented which warrants a minor version upgrade

    ✔️ Check List (Check all the applicable boxes)

    • [ ] My code follows the code style of this project.
    • [x] This PR does not contain plagiarized content.
    • [x] The title of my pull request is a short description of the requested changes.

    📄 Note to reviewers

    • I configured the prettier plugin to ignore all files except .js files since the CLI is based on JavaScript. I did this because I am not quite sure if there were any plans for configuring prettier (HTML, CSS, MD, etc) for this project.

    TODOS

    • Firstly, the CLI is useful for creating new components as specified in the README. However, it can be potentially improved to include managing existing components interactively as well in the future.
    • Secondly, all the packages are called in the same file (bin/index.js) ATM. All the questions should live in bin/questions.js. Similarly, the colors should live in bin/colors.js. This is to keep the index.js file neat
    • Currently, there's no styling for the terminal outputs; the ansi-colors package should be used to style the terminal outputs

    📷 Screenshots

    https://user-images.githubusercontent.com/72257135/199611039-cd7ce372-7214-43a9-90a4-20a5a3f0b465.mp4

    opened by slim-codes 1
  • [FEATURE] Adding installation proccess to the site

    [FEATURE] Adding installation proccess to the site

    New Features

    The installation tab still shows coming soon, wich is not really nice from user's perspective

    What is the new or updated feature that you are suggesting?

    Adding some installation and using guidelines

    What documentation changes are needed to explain this?

    enhancement 
    opened by rupali-codes 0
  • [BUG] report

    [BUG] report

    I am getting the following error when I run the application, can anyone help me fix this?

    **Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.**
    bug 
    opened by gurudattpuranik25 1
Owner
Dan
A creative UI designer and Software Developer creating beautiful and functional products with delightful user experiences.
Dan
GitHub https://dripui.vercel.app/
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
Shopify Landing (Open source landing page shopify application)

SHOPIFY Open source landing page shopify application Configuration and Setup Key Features Technologies used ?? Screenshots Author License Configuratio

Gilbert Hutapea 8 May 10, 2023
Statichunt is a free open-source Jamstack directory that lists hundreds of themes, starters, and resources for Jamstack sites.

Statichunt Statichunt is an open-source directory that enlists hundreds of themes, starters, and resources for static site generators submitted by the

Statichunt 12 Dec 29, 2022
MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

MUI 83.6k Dec 30, 2022
Landing page using Next.js and Tailwind

This is a Next.js project bootstrapped with create-next-app. Demo Application Please check out this link(https://next-cloudbunnies-nft-landing-page.ve

climax1115 23 Nov 27, 2022
Landing page using Next.js and Tailwind

This is a Next.js project bootstrapped with create-next-app. Demo Application Please check out this link(https://next-cloudbunnies-nft-landing-page.ve

climax1115 17 Aug 4, 2022
⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

M Haidar Hanif 81 Dec 24, 2022
tooldb is a (soon) massive collection of frameworks and tools. It's build on Flowbite, Next.js, Tailwind CSS and uses Supabase.

tooldb is a (soon) massive collection of frameworks and tools. It's build on Flowbite, Next.js, Tailwind CSS and uses Supabase.

Julian Yaman 12 Jul 14, 2022
Free Next.js responsive landing page template for SaaS products made using JAMStack architecture.

✨ Free Next.js marketing website template for SaaS startups ✨ Everything you need to build a great landing page / marketing website for your startup.

RainBow 6 Nov 5, 2022
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework. Why use Preline UI? Based on the Tailwin

Html Stream 1.1k Jan 3, 2023
Ready-to-use Remix + Tailwind CSS routes and components.

remix-blocks What is RemixBlocks? Ready-to-use Remix + Tailwind CSS routes, and UI components, all blocks: Are full-stack routes. Are independent of e

Alexandro Martínez 111 Jan 5, 2023
Next.js app using some dummy Tailwind CSS components

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Claudson Martins 1 Oct 12, 2022
Discover a vast library of open-source Tailwind CSS components and Mobile UI design elements 🚀

SundarUI ?? Discover a vast library of open-source Tailwind CSS components and Mobile UI design elements ?? What is SundarUI? Sundar UI is a library o

Raj Patel 4 Mar 19, 2023
A Tailwind plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.

Tailwind Labeled Groups A plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and

Max 18 Nov 21, 2022
Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

Javi Aguilar 1.4k Dec 22, 2022
A collection of handmade, professional and dazzling CSS components. ✨

CSS Components Library — Endless collection. Made with ♥ by Eluda for the AWS Amplify hackathon. About the app CSS Components is an online collection

Eluda 1 Oct 1, 2022
Feel free to create new file, don't hesitate to pull your code, the most important thing is that the file name here must match your nickname so that file does not conflict with other people.

Hacktoberfest Indonesia Apa Itu Hacktoberfest ? Hacktoberfest adalah acara tahunan yang bertujuan untuk mendorong berkontribusi kedalam ekosistem open

Juan Daniel 5 Dec 15, 2022
Build Schema.org graphs for JavaScript Runtimes (Browser, Node, etc). Improve your sites SEO with quick and easy Rich Results.

schema-org-graph-js The quickest and easiest way to build Schema.org graphs for JavaScript Runtimes (Browser, Node, etc). Status: ?? In Development Pl

Harlan Wilton 17 Dec 21, 2022
Api for playing around with dummy data. Feel free to use it in your demo projects, tutorials, or testing tasks.

dummy-api Api similar to dummy-api Api for playing around with dummy data. Feel free to use it in your demo projects, tutorials, or testing tasks. All

Donald Wu 4 Jan 7, 2023