DOCSEARCHbyAlgolia
Submit Docs

Ripple UI Documentation

website·Indexed 32 days ago

https://ripple-ui.com/

A TailwindCSS-based UI library providing a comprehensive set of components including buttons, modals, navbars, tables, and forms. It offers a default theme with customization options and can be installed via npm, yarn, or CDN.

Tokens
25.5K
Snippets
166
Records
184
Agent score
63%

What's inside Ripple UI

  2. Understand the RippleUI default theme color system

    RippleUI uses RadixUI Colors as the foundation for its default theme. The theme supports light and dark modes via a toggle. By default, the page background is set to backgroundPrimary and the text color is set to content1.

  3. Enable Dark Mode in Ripple UI

    Ripple UI includes built-in dark mode support. When the dark mode switch is toggled, the UI automatically updates to the colors specified in the Ripple UI configuration.

  4. Include Ripple UI via CDN

    For the fastest setup, you can include the Ripple UI stylesheet directly in your HTML using the jsDelivr or UNPKG CDN.
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rippleui@1.12.1/dist/css/styles.css" />

  5. Style and configure Ripple UI Textarea components

    The Textarea component in Ripple UI is styled using a set of utility classes applied to a standard <textarea> element. The base class textarea must be present for all styles to apply correctly.
    <!-- Basic Textarea -->
<textarea class="textarea" placeholder="Welcome!" />

<!-- Disabled Textarea -->
<textarea class="textarea" placeholder="Disabled" disabled />

  6. Create an indeterminate progress bar

    To show a progress bar that animates infinitely (indeterminate), omit the value attribute. Because browser support for indeterminate <progress> elements varies, it is recommended to use a div with the progress-indeterminate class for cross-browser compatibility (Safari, Firefox, etc.).
    <!-- Works on Edge or Chrome -->
<progress class="progress"></progress>

<!-- Recommended for Safari, Firefox, and other browsers -->
<div class="progress progress-indeterminate"></div>

  7. Create a vertical Range slider

    To orient a range slider vertically, add the range-vertical class. Note that you must explicitly set a height or margin (e.g., using utility classes like mt-14) for the vertical range to display correctly.
    <input type="range" class="range range-vertical mt-14" />

  8. Install RippleUI using npm or yarn

    To install RippleUI as a plugin, you must first have TailwindCSS installed in your project. After installing the package, add rippleui to the plugins array in your tailwind.config.js file to enable its styles.
    npm install rippleui
    // tailwind.config.js
module.exports = {
  // ... the rest of your config
  plugins: [require("rippleui")],
}

  9. Install RippleUI via CDN

    You can use RippleUI without a build step by adding the CSS stylesheet and the TailwindCSS script to your HTML file. Note that using the CDN method prevents the removal of unused styles, which may impact performance.
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rippleui@1.12.1/dist/css/styles.css" />
<script src="https://cdn.tailwindcss.com"></script>

<button class="btn btn-primary">Hello World!</button>

  10. Implement status indicators using Dots

    The Dots component provides a visual way to show the status of a process. It is implemented using a base dot class and optional color modifier classes to represent different states (e.g., success, error, warning).
    <!-- Default dot -->
<span class="dot"></span>

<!-- Colored dots -->
<span class="dot dot-primary"></span>
<span class="dot dot-secondary"></span>
<span class="dot dot-success"></span>
<span class="dot dot-warning"></span>
<span class="dot dot-error"></span>

  11. Make Tabs responsive with overflow

    For tab sets that may exceed the container width on small screens, wrap the .tabs container in a div with overflow-auto and apply flex-nowrap to the tabs container to enable horizontal scrolling.
    <div class="w-full max-w-xs overflow-auto">
  <div class="tabs w-full flex-nowrap">
    <div class="tab">Tab 1</div>
    <div class="tab tab-underline tab-active">Tab 2</div>
    <div class="tab">Tab 3</div>
    <div class="tab">Tab 4</div>
    <div class="tab">Tab 5</div>
  </div>
</div>

  12. Create collapsible Menu items

    Implement a collapsible menu by using a checkbox with the menu-toggle class. The label associated with the checkbox acts as the trigger, and the content to be toggled is wrapped in a div with the menu-item-collapse class.
    <li>
  <input type="checkbox" id="menu-1" class="menu-toggle" />
  <label class="menu-item justify-between" for="menu-1">
    <span>General</span>
    <span class="menu-icon">
      <svg class="w-4 h-4 stroke-content3">...</svg>
    </span>
  </label>
  <div class="menu-item-collapse">
    <div class="min-h-0">
      <label class="menu-item ml-6">Accounts</label>
      <label class="menu-item ml-6">Billing</label>
    </div>
  </div>
</li>