Ripple UI

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

Documentation

Visit https://ripple-ui.com 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.

License

RippleUI is licensed under the MIT License.