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

36

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.12.1/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="active:shadow-3xl inline-flex w-fit rounded-lg
bg-purple-10 py-2 px-4 text-sm font-semibold
text-white shadow-lg transition-transform
hover:bg-purple-8 hover:shadow-xl active:scale-95">
Click me
</button>
<button class="btn btn-secondary">
Click me
</button>
Another comparison.
<input
class="focus:shadow-outline mb-3
w-full max-w-xs appearance-none
rounded-lg border-2 border-blue-9
bg-transparent py-2 px-3 leading-tight
text-gray-8 shadow focus:outline-none
placeholder:text-gray-400"
placeholder="Type here"
>
<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-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.

TitleLong sample text
TitleLong sample text
PrimarySecondarySuccessDangerWarning

Community Support