Stimulus Components is now an organization on NPM. Read more

Stimulus Components

Stimulus Components is an open-source set of StimulusJS controllers to solve common patterns.

Get started →

GitHub

Trusted by the world’s most innovative teams

Stimulus JS is a modest yet powerful JavaScript framework that augments your HTML with just enough behavior to make it shine.

We all share common behaviors between our applications and no one want to reinvent the wheel. That is why the Stimulus Components library exists. To bring you generic and customizable controllers in your applications.

Every components of this library share a same philosophy:

Have a great documentation and demo.
Can be extended and customized for your needs with a strong API.
Be easy to learn and use.
Completely unstyled, UI agnostic. You bring the design, we bring the JavaScript.
Be as close as possible to the Stimulus conventions.

The Stimulus Components library is already used by hundreds of developers and many companies.

🧪 Quick example

Here is an example of how to use Stimulus Character Counter.

1. Install the package:

Terminal

$ yarn add @stimulus-components/character-counter

2. Import it in your application:

app/javascript/controllers/index.js

import { Application } from "@hotwired/stimulus"
import CharacterCounter from "@stimulus-components/character-counter"

const application = Application.start()
application.register("character-counter", CharacterCounter)

3. Use it in your views

app/views/index.html

<div data-controller="character-counter">
  <textarea data-character-counter-target="input"></textarea>

  <p>
    There are
    <strong data-character-counter-target="counter"></strong>
    characters in this textarea.
  </p>
</div>

4. Try it

Character Counter

There are characters in this textarea.

5. Enjoy! 🎉

It is as easy as that.

Numbers speak for themselves

Stimulus Components is the library of choice when you are working with Stimulus JS.

Packages: 25+
Contributors: 15+
Downloads last year: 6,968,000+

Components

Browse all our components available!

Auto Submit
A Stimulus controller to auto-submit forms.
Character Counter
A Stimulus controller that counts the number of characters in any input fields.
Checkbox Select All
A Stimulus controller for managing checkbox lists.
Clipboard
A Stimulus controller to copy text to clipboard.
Dropdown
A Stimulus controller to create a dropdown.
Password Visibility
A Stimulus controller to change a password input visibility.
Rails Nested Form
A Stimulus controller to create new fields on the fly to populate your Rails relationship with accepts_nested_attributes_for.