github

Stimulus Components

An ever-growing library of Stimulus.js components designed for use with Rails UI, but also versatile enough to be used independently.

Preview examples locally by running yarn install && yarn run build && npx serve. Then open localhost:3000 in your browser.

Clipboard

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

Input trigger

square-2-stack

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>

Range slider

Range sliders aren't too easy to customize. With custom CSS variables and a dash of JavaScript from the range controller we can make this more branded.

Select all

Add a select all checkbox to a series of child checkboxes. If one or more of the children are checked then the parent checkbox becomes indeterminate until the rest are checked or unchecked entirely.

  • John Doe

    Active
    Jan 20, 2022
    Edit

  • Rich Miles

    Active
    Jan 20, 2022
    Edit

  • Rose Mary

    Active
    Jan 20, 2022
    Edit

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.

hand-thumb-up

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">
   <!-- 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