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.
A nice drop-in animated effect for stats. Control the duration and display with extended data attributes.
of developers report higher productivity with the use of modern development tools.
of developers prefer using Tailwind CSS for its utility-first approach.
of developers experienced faster project completion times with Ruby on Rails.
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>
Animated dropdowns with the help of stimulus-use.
Fluid modals with the help of stimulus-use for transition effects.
This modal contains important information about the actions you are about to take. Make sure you have read all the instructions carefully.
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.
Some activities...
Account information...
Billing information...
Team information...
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.
<!-- 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>
// 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: [],
}
Why hello there...
Drop-in tooltips with the help of tippy.js