Rails UI Stimulus.js Components
npm install railsui-stimulusA 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.
1. Pin the package and its dependencies:
``bash`
./bin/importmap pin railsui-stimulus
2. Add the required dependencies to your config/importmap.rb:
`rubyconfig/importmap.rb
pin "railsui-stimulus", to: "https://unpkg.com/railsui-stimulus@1.1.1/dist/importmap/index.js"
3. Add required CSS files to your
or include via CDN:`css
/ 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:
erb
<%= 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" %>
`4. Import components in your JavaScript entrypoint (e.g.,
):`javascript
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)
`$3
📚 NPM/Bundler Setup Guide → - Detailed instructions for Vite, Webpack, esbuild, etc.
Add the module
bash
npm install railsui-stimulus
`bash
yarn add railsui-stimulus
`bash
bun add railsui-stimulus
`Import it in your main entrypoint file.
javascript
// 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)
`Documentation
$3
- IMPORTMAP.md - Complete importmap setup guide (Rails 7+)
- BUILD.md - NPM/bundler setup guide (Vite, Webpack, etc.)
- PUBLISHING.md - How to publish and get on CDNs$3
- Clipboard
- Count up
- Combobox
- Date range picker
- Dropdown
- Modal
- Password Toggle
- Range
- Read more
- Select all
- Tab
- Toast
- Toggle
- Tooltip
Styles
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.
Extending
With Stimulus, you can inherit one component from another. Inherited controllers automatically access the targets defined by their parent class.
If you override the
, disconnect, or any other methods from the parent, call super.method() so the parent’s functionality is properly executed.`javascript
import { RailsuiToggle } from 'railsui-stimulus'export default class CheckboxToggle extends RailsuiToggle {
connect() {
super.connect()
console.log('toggleable', this.toggleableTarget)
}
}
`Bugs/Contributing
Run
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.