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

TitleLong sample text

CheckboxSwitchRadio

PrimarySecondarySuccessErrorWarning

Buy a Cat!Cat

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">                 
            ‎

Community Support

Discord

For ask to the comunity and solve all your questions

Github

For report bugs and suggest new features to the project

Twitter