StimulusJS Tailwind Components

A Tailwind inspired StimulusJS Library similiar to HeadlessUI but for frameworkless languages like Ruby on Rails, static HTML and others.

import { Application } from "@hotwired/stimulus";
import { Theme, Notification, Switch, Modal } from "stimulus-tailwind-components";
(() => {
const application = Application.start();
application.register("theme", Theme);
application.register("notification", Notification);
application.register("switch", Switch);
application.register("modal", Modal);


Getting started

Learn what features are supported today by StimulusJS Tailwind Components package.


A Notification that can be Manually or Auto Dismissed in a specified zone.


Ability to toggle Dark and Light Theme. With the ability to detect system preferece on load.


A toggle to show a switch.


Ability to show and hide a modal.

Quick start

This package contains pre built stimulus controllers for common tailwindcss based components inspired by TailwindUI & HeadlesUI to help save you the time from having to build on every project you may need it on.

Installing dependencies

Be sure to add @hotwired/stimulus and tailwindcss to your dependencies to start before installing stimulus-tailwind-components

yarn add @hotwired/stimulus@latest tailwindcss@latest


npm install @hotwired/stimulus@latest tailwindcss@latest


pnpm add @hotwired/stimulus@latest tailwindcss@latest

Tailwindcss is not a hard dependecy but is the recommeneded styling library.

Basic usage

See Installation section for full details.


Features available with HTML Formatter for simplecov

  • Notifications
  • Theme
  • Switch
  • Modal



Simplecov Tailwind is available as open source under the terms of the MIT License.

Change Log

Latest release details

Version 0.5.0

  • Feature: Switch
  • Feature: Modal
  • Example: Switch
  • Example: Modal
  • Documentation: Switch
  • Documentation: Modal

Getting help

There are many ways to get assistance via Issues, Discussions, Pull Requests and Discord Community.


Bug Reports, Feature Requests, and Pull Requests are welcome on GitHub at This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

To see more about Contributing check out this document.

  • Fork Repo and create new branch
  • Once all is changed and committed create a pull request.

Ensure all merge conflicts are fixed and CI is passing.

Join the community

Join the community buy posting in our discussions on GitHub or joining the community on discord!