A suite of Stimulus.js components built with Tailwind CSS for use in Rails UI. You can use these independently of Rails UI.
You'll need to install and configure Stimulus.js in your project before using this package.
Rails 7+ ships with importmap-rails by default. This method doesn't require npm or a build step.
📚 Complete Importmap Guide → - Includes self-hosted setup, troubleshooting, and more.
- Pin the package and its dependencies:
./bin/importmap pin railsui-stimulus- Add the required dependencies to your
config/importmap.rb:
# config/importmap.rb
pin "railsui-stimulus", to: "https://unpkg.com/railsui-stimulus@1.1.2/dist/importmap/index.js"
# Pin dependencies
pin "@hotwired/stimulus", to: "https://unpkg.com/@hotwired/stimulus@3.2.2/dist/stimulus.js"
pin "tippy.js", to: "https://unpkg.com/tippy.js@6.3.7/dist/tippy.esm.js"
pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.8/dist/esm/index.js"
pin "flatpickr", to: "https://unpkg.com/flatpickr@4.6.13/dist/esm/index.js"
pin "hotkeys-js", to: "https://unpkg.com/hotkeys-js@3.13.15/dist/hotkeys.esm.js"
pin "stimulus-use", to: "https://unpkg.com/stimulus-use@0.52.2/dist/index.js"- Add required CSS files to your
app/assets/stylesheets/application.cssor include via CDN:
/* For Tooltip component */
@import "https://unpkg.com/tippy.js@6.3.7/dist/tippy.css";
/* For Date Range Picker component */
@import "https://unpkg.com/flatpickr@4.6.13/dist/flatpickr.min.css";Or in your layout file:
<%= stylesheet_link_tag "https://unpkg.com/tippy.js@6.3.7/dist/tippy.css" %>
<%= stylesheet_link_tag "https://unpkg.com/flatpickr@4.6.13/dist/flatpickr.min.css" %>- Import components in your JavaScript entrypoint (e.g.,
app/javascript/controllers/index.js):
import { Application } from "@hotwired/stimulus"
const application = Application.start()
// Import components
import {
RailsuiClipboard,
RailsuiCountUp,
RailsuiCombobox,
RailsuiDateRangePicker,
RailsuiDropdown,
RailsuiModal,
RailsuiPasswordToggle,
RailsuiRange,
RailsuiReadMore,
RailsuiSelectAll,
RailsuiTabs,
RailsuiToast,
RailsuiToggle,
RailsuiTooltip,
} from "railsui-stimulus"
application.register("railsui-clipboard", RailsuiClipboard)
application.register("railsui-count-up", RailsuiCountUp)
application.register("railsui-combobox", RailsuiCombobox)
application.register("railsui-date-range-picker", RailsuiDateRangePicker)
application.register("railsui-dropdown", RailsuiDropdown)
application.register("railsui-modal", RailsuiModal)
application.register("railsui-password-toggle", RailsuiPasswordToggle)
application.register("railsui-range", RailsuiRange)
application.register("railsui-read-more", RailsuiReadMore)
application.register("railsui-select-all", RailsuiSelectAll)
application.register("railsui-tabs", RailsuiTabs)
application.register("railsui-toast", RailsuiToast)
application.register("railsui-toggle", RailsuiToggle)
application.register("railsui-tooltip", RailsuiTooltip)📚 NPM/Bundler Setup Guide → - Detailed instructions for Vite, Webpack, esbuild, etc.
Add the module railsui-stimulus
npm install railsui-stimulusyarn add railsui-stimulusbun add railsui-stimulusImport it in your main entrypoint file.
// Start Stimulus
import { Application } from '@hotwired/stimulus'
const application = Application.start()
// Import components adhoc.
import {
RailsuiClipboard,
RailsuiCountUp,
RailsuiCombobox,
RailsuiDateRangePicker,
RailsuiDropdown,
RailsuiModal,
RailsuiPasswordToggle,
RailsuiRange,
RailsuiReadMore,
RailsuiSelectAll,
RailsuiTabs,
RailsuiToast,
RailsuiToggle,
RailsuiTooltip,
} from 'railsui-stimulus'
application.register('railsui-clipboard', RailsuiClipboard)
application.register('railsui-count-up', RailsuiCountUp)
application.register('railsui-combobox', RailsuiCombobox)
application.register('railsui-date-range-picker', RailsuiDateRangePicker)
application.register('railsui-dropdown', RailsuiDropdown)
application.register('railsui-modal', RailsuiModal)
application.register('railsui-password-toggle', RailsuiPasswordToggle)
application.register('railsui-range', RailsuiRange)
application.register('railsui-read-more', RailsuiReadMore)
application.register('railsui-select-all', RailsuiSelectAll)
application.register('railsui-tabs', RailsuiTabs)
application.register('railsui-toast', RailsuiToast)
application.register('railsui-toggle', RailsuiToggle)
application.register('railsui-tooltip', RailsuiTooltip)- IMPORTMAP.md - Complete importmap setup guide (Rails 7+)
- BUILD.md - NPM/bundler setup guide (Vite, Webpack, etc.)
- Clipboard
- Count up
- Combobox
- Date range picker
- Dropdown
- Modal
- Password Toggle
- Range
- Read more
- Select all
- Tab
- Toast
- Toggle
- Tooltip
The examples provided come from some of the UI from Rails UI. You'll want to tweak this to match your needs, or go check out Rails UI for drop-in UI for your next Ruby on Rails application.
With Stimulus, you can inherit one component from another. Inherited controllers automatically access the targets defined by their parent class.
If you override the connect, disconnect, or any other methods from the parent, call super.method() so the parent’s functionality is properly executed.
import { RailsuiToggle } from 'railsui-stimulus'
export default class CheckboxToggle extends RailsuiToggle {
connect() {
super.connect()
console.log('toggleable', this.toggleableTarget)
}
}Run npx serve locally to preview all components.
Bug reports and pull requests are welcome! Head to https://github.com/getrailsui/railsui-stimulus.
Rails UI gives Rails developers instance access to professionally designed templates and components.
Leverage breathtaking UI to fast-track your next idea.