Ripple UI Ultimate toolkit for modern interface design.
Ripple UI is a collection of components and utilities that are used to build modern interfaces. It is built on top of Tailwind CSS.
npm install rippleui
Reusable components and easy to implement.
RippleUI is a custom TailwindCSS framework that comes with of reusable components built on top of Tailwind CSS that includes pre-defined styles and layout options.
RippleUI comes with easy documentation that will guide you through its features and help you to easily implement it in your project.
Easy configuration is a key feature of RippleUI, allowing you to quickly set up and customize the tool to meet your specific needs and preferences.
Get and Give Help by Joining our Contributors Community
Get Started Any Way You Want
Get started with RippleUI quickly by using the CDN, installing it through a package manager, or downloading the source code.
Install via Package Manager
npm install rippleui
Read our installation guide for more information on how to get started
Include via CDN
Compare with base Tailwind CSS
RippleUI is a custom TailwindCSS framework that comes with of reusable components built on top of Tailwind CSS that includes pre-defined styles and layout options, instead of having infinite classes to choose from, RippleUI comes with a set of pre-defined classes that you can use to build your UI.
<buttonclass="active:shadow-3xl inline-flex w-fit rounded-lgbg-purple-10 py-2 px-4 text-sm font-semiboldtext-white shadow-lg transition-transformhover:bg-purple-8 hover:shadow-xl active:scale-95">Click me</button>
<button class="btn btn-secondary">Click me</button>
<inputclass="focus:shadow-outline mb-3w-full max-w-xs appearance-nonerounded-lg border-2 border-blue-9bg-transparent py-2 px-3 leading-tighttext-gray-8 shadow focus:outline-noneplaceholder:text-gray-400"placeholder="Type here">
<input class="input input-primary">
<divclass="relative inline-block w-10 mr-2align-middle select-none transitionduration-200 ease-in"><inputtype="checkbox"class="toggle-checkbox absolute block w-6 h-6rounded-full bg-white border-4appearance-none cursor-pointer"/><labelclass="toggle-label blockoverflow-hidden h-6 rounded-fullbg-gray-4 cursor-pointer"></label></div>
<input class="switch" type="checkbox">
Dark mode support out of the box.
Ripple UI comes with dark mode support automatically. When you toggle the dark mode switch, the entire UI will change to colors specified by config of RippleUI.