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.

Combobox

A dynamic combobox designed with accessibility in mind. Use keyboard commands to navigate through options with tab, arrow keys, and enter. Search options with the search field and select an option with the enter key.

Theme it with Tailwind CSS.

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.

Read more

In this chat, we discuss our experiences and insights from the creative writing course. We share our thoughts on various writing prompts, exchange feedback on our stories, and encourage each other to explore new ideas and styles. Whether you're a beginner or an experienced writer, this space is dedicated to fostering creativity and collaboration among aspiring authors.

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