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.

Get Started
npm install rippleui
Why Build with RippleUI?

Reusable components and easy to implement.

Reusable Components

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.

Easy Documentation

RippleUI comes with easy documentation that will guide you through its features and help you to easily implement it in your project.

Easy Configuration

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.

Community

Get and Give Help by Joining our Contributors Community

Installs on NPM

Stars on Github

5

Total contributors

29

Total of components

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

Install RippleUI choosing your favorite package manager like npm, yarn, or pnpm.
npm install rippleui

Read our installation guide for more information on how to get started

Include via CDN

The fastest way to get started with RippleUI is to use the CDN hosted on jsDelivr. You can also use the UNPKG CDN.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/rippleui@1.7.0/dist/css/styles.css"
/>

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.

<button
class="bg-purple-800 hover:bg-purple-700
focus:bg-purple-800 active:bg-purple-900
text-white py-2 px-4 rounded-lg shadow-lg
hover:shadow-xl focus:shadow-2xl
active:shadow-3xl hover:text-purple-100
focus:text-purple-200 active:text-purple-300">
Click me
</button>
<button class="btn btn-secondary">
Click me
</button>
Another comparison.
<input
class="shadow appearance-none border border-red-500
rounded w-full py-2 px-3 text-gray-700 mb-3
leading-tight focus:outline-none
focus:shadow-outline"
placeholder="Username"
>
<input class="input input-primary">
Another comparison.
<div
class="relative inline-block w-10 mr-2
align-middle select-none transition
duration-200 ease-in">
<input
type="checkbox"
class="toggle-checkbox absolute block w-6 h-6
rounded-full bg-white border-4
appearance-none cursor-pointer"/>
<label
class="toggle-label block
overflow-hidden h-6 rounded-full
bg-gray-300 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.

TitleLong sample text
TitleLong sample text
PrimarySecondarySuccessDangerWarning

Community Support