TypeScript icon, indicating that this package has built-in type declarations

1.12.1 • Public • Published

alt text for screen readers

Ripple UI

npm downloads npm downloads npm downloads

GitHub last commit (by committer)

Welcome to the RippleUI repository! This is the home for all of the components, guidelines, and tools that make up our design system.


Visit to view the full documentation.

🚀 Usage

To use the RippleUI components, you will need to install the package from npm.

npm install rippleui

Once you have installed the package, you can import the plugin into your tailwind.config.js.

module.exports = {
  // ... the rest of your config
  plugins: [require("rippleui")],

To use a component, simply include the appropriate HTML markup in your project and apply the relevant classes using the class naming.

<button class="btn-primary btn">Click me!</button>

🎨 Components

Here is a list of all of the components that are currently available in RippleUI.

  • Button
  • Input
  • Select
  • Checkbox
  • Radio
  • Switch
  • Textarea
  • Modal
  • Button-Group
  • Tooltip
  • Dropdown
  • Badge
  • Navbar
  • Avatar
  • Breadcrumb
  • Drawer
  • Alert
  • Table
  • Card
  • Accordion
  • Tabs
  • Pagination
  • Divider
  • Skeleton
  • Stepper
  • Link
  • Dots (Status)
  • Range
  • Progress
  • KBD
  • Forms
  • Menu
  • Popover
  • Sidebar
  • Spinners / Loaders
  • Input File
  • More components soon....

🤝 Contributing

We welcome contributions to the design system! If you have ideas for new components, improvements to existing ones, or updates to the guidelines and tools, please open a pull request with your proposed changes.


RippleUI is licensed under the MIT License.

Package Sidebar


npm i rippleui

Weekly Downloads






Unpacked Size

4.96 MB

Total Files


Last publish


  • siumauricio