Rails UI Stimulus.js Components

Clipboard

A drop-in click-to-copy component with the help of tippy.js

Input trigger

Button trigger

Count up

A nice drop-in animated effect for stats. Control the duration and display with extended data attributes.

0%

of developers report higher productivity with the use of modern development tools.

88%

of developers prefer using Tailwind CSS for its utility-first approach.

72%

of developers experienced faster project completion times with Ruby on Rails.

Date Range Picker

A custom date range picker built with flatpickr.js. Range selected outputs to a hidden input.

Example usage in the context of a Rails app.

<!-- Pass custom values (optional) -->
<button type="button" class="btn btn-white..." data-controller="date-range-picker"
data-date-range-picker-date-format-value="m-d-Y"
data-date-range-picker-date-min-date-value="<%= Date.today.year - 1 %>">
  <span data-date-range-picker-target="label"></span>
  <input type="hidden" data-date-range-picker-target="input">
</button>

Dropdowns

Animated dropdowns with the help of stimulus-use.

Modal

Fluid modals with the help of stimulus-use for transition effects.

Tab

Some activities...

Toast

Use toasts to deliver real-time updates to a user without disrupting their flow.

There is a required custom CSS animation class designed specifically for toasts opening from the right or left via the tailwind.config.js file.

Successfully liked!

John Doe has been notified.

Example markup


<!-- Toast from right example -->
<div aria-live="assertive"
class="pointer-events-none absolute top-0 right-0 left-0 w-full toast-from-right"
data-controller="railsui-toast"
data-railsui-toast-trigger-on-load-value="true">
  <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-neutral-950 dark:border dark:border-neutral-700/80">
   <!-- Toast content -->
  </div>

</div>

Extended tailwind configuration


// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      keyframes: {
        "toast-from-right": {
          "0%": { transform: "translateX(50%)", opacity: "0%" },
          "100%": { transform: "translateX(0)", opacity: "100%" },
        },
        "toast-from-left": {
          "0%": { transform: "translateX(-50%)", opacity: "0%" },
          "100%": { transform: "translateX(0)", opacity: "100%" },
        },
      },
      animation: {
        "toast-from-right": "toast-from-right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)",
        "toast-from-left": "toast-from-left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)",
      },
    },
  },
  plugins: [],
}

Toggle

Tooltip

Drop-in tooltips with the help of tippy.js

Stimulus Components