Stimulus Components

Craft world-class Stimulus controllers with your own styles

Over 25 Stimulus controllers with built-in behavior, top-tier documentation, designed for easy extension, and ready for your styles to solve every day frontend problems.

Character Counter

There are characters in this textarea.

Checkbox Select All

Clipboard

Dropdown

Password Visibility

Password

Get started

GitHub

Completely unstyled, UI-agnostic

Stimulus Components is not a single installable library. Instead, it offers a collection of standalone controllers that you can integrate as needed.
Completely UI-agnostic, it works seamlessly with any CSS framework, including custom ones.

Install the package

Terminal

$ yarn add @stimulus-components/clipboard

Import it in your application

app/javascript/controllers/index.js

import { Application } from "@hotwired/stimulus"
import Clipboard from "@stimulus-components/clipboard"

const application = Application.start()
application.register("clipboard", Clipboard)

Import your design

index.html

<div
  data-controller="clipboard"
  data-clipboard-success-content-value="<strong>Copied!</strong>"
  class="mt-1 flex rounded-md shadow-sm"
>
  <input
    type="text"
    value="https://www.slog-app.com/register"
    data-clipboard-target="source"
    readonly
    class="py-3 px-2 outline-none flex-1 block rounded-none rounded-l-md sm:text-sm border border-gray-300"
  />

  <button
    type="button"
    data-action="clipboard#copy"
    data-clipboard-target="button"
    class="inline-flex items-center gap-1 px-3 focus:outline-none rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"
  >
    Copy to clipboard
  </button>
</div>

Safari

Invite your team

View the people on your team. Invite new team members to join, and set permissions for each team member.

Getting started

Numbers speak for themselves

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

Components: 25+
Contributors: 15+
Downloads last year: 7,547,000+

Versatile and modular components for every need

Stimulus Components provides a flexible API that allows you to control the level of detail to your preference. Begin with high-level components featuring built-in DOM structures, and extend the controllers as needed to tailor their behavior.

Auto Submit
A Stimulus controller to auto-submit forms.
Character Counter
A Stimulus controller that counts the number of characters in any input fields.
Chartjs
A Stimulus controller to deal with chart.js.
Checkbox Select All
A Stimulus controller for managing checkbox lists.
Clipboard
A Stimulus controller to copy text to clipboard.
Dialog
A Stimulus controller to show modals with the native Dialog element.
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.