RippleUI

A standard RippleUI sidebar is composed of three main sections:

1. Sidebar Title (sidebar-title): Used for branding or application identity (e.g., logo and team name).
2. Sidebar Content (sidebar-content): The primary navigation area. It typically contains a menu component with menu-section, menu-title, and menu-items.
3. Sidebar Footer (sidebar-footer): Located at the bottom, often used for user profiles or settings, frequently utilizing a dropdown component.

To ensure the content area is scrollable while the footer stays at the bottom, apply min-h-[20rem] (or similar) to the sidebar-content section.

<aside class="sidebar sidebar-sticky">
  <section class="sidebar-title">
    <!-- Logo and App Name -->
  </section>

  <section class="sidebar-content">
    <nav class="menu">
      <!-- Navigation Links -->
    </nav>
  </section>

  <section class="sidebar-footer">
    <!-- User Profile / Settings -->
  </section>
</aside>

You can customize the color of the progress bar by adding specific color utility classes. Ripple UI provides standard semantic colors and a 'flat' variant that changes the background color to match the theme.

<!-- Standard Colors -->
<progress class="progress progress-primary" value="50" max="100"></progress>
<progress class="progress progress-secondary" value="50" max="100"></progress>
<progress class="progress progress-success" value="50" max="100"></progress>
<progress class="progress progress-warning" value="50" max="100"></progress>
<progress class="progress progress-error" value="50" max="100"></progress>

<!-- Flat Colors (different background colors) -->
<progress class="progress progress-flat-primary" value="50" max="100"></progress>
<progress class="progress progress-flat-secondary" value="50" max="100"></progress>
<progress class="progress progress-flat-success" value="50" max="100"></progress>
<progress class="progress progress-flat-warning" value="50" max="100"></progress>
<progress class="progress progress-flat-error" value="50" max="100"></progress>

Ripple UI provides a set of CSS classes to structure and style forms. To create a standard form, use the following class hierarchy:

• form-group: A container for a collection of form fields.
• form-field: A container for an individual input field, its label, and optional validation messages.
• form-label: Used for the input's label text.
• form-label-alt: Used for secondary label text, such as validation error messages or helper text.
• form-control: A wrapper used to control the layout and alignment of elements within a field (e.g., for checkboxes or button alignment).
• input: The base class for input elements.
• checkbox: The class for checkbox inputs.
• btn: The base class for buttons, often combined with modifiers like btn-primary.

<div class="form-group">
    <div class="form-field">
        <label class="form-label">Email address</label>
        <input type="email" class="input" />
        <label class="form-label">
            <span class="form-label-alt">Please enter a valid email.</span>
        </label>
    </div>
</div>

To prevent the modal from closing when a user clicks on the background overlay, simply omit the htmlFor attribute from the <label className="modal-overlay"> element. The modal will then only close via explicit close buttons (like a 'Cancel' button or an 'X' icon) that target the checkbox ID.

<label className="btn btn-primary" htmlFor="modal-3">Open Modal</label>
<input className="modal-state" id="modal-3" type="checkbox" />
<div className="modal">
<label className="modal-overlay"></label> <!-- No htmlFor attribute here -->
<div className="modal-content flex flex-col gap-5">
    <label htmlFor="modal-3" className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
    <h2 className="text-xl">Modal title 3</h2>
    <div className="flex gap-3">
    <button className="btn btn-error btn-block">Delete</button>
    <button className="btn btn-block">Cancel</button>
    </div>
</div>
</div>