StimulusJS Tailwind Components

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

Get startedView on GitHub
application.js
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);
})();

Introduction

Getting started

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

Notification

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

Theme

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

Switch

A toggle to show a switch.

Modal

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

or

npm install @hotwired/stimulus@latest tailwindcss@latest

or

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

Features available with HTML Formatter for simplecov

  • Notifications
  • Theme
  • Switch
  • Modal

Resources

License

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

Change Log

Latest release details

Version 0.5.0

Features
  • 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.

Contributing

Bug Reports, Feature Requests, and Pull Requests are welcome on GitHub at https://github.com/chiefpansancolt/stimulus-tailwind-components. 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!

Next
Installation