Getting Started with Stimulush

Learn how to use Stimulush components in your Rails application. Copy, paste, and customize 100+ production-ready UI components.

Quick Start

1

Browse Components

Explore our collection of 100+ components organized by category.

2

Copy Code

Copy the HTML, Stimulus controller, and CSS classes for any component.

3

Customize

Modify the code to match your design system and requirements.

Start Browsing Components

Prerequisites

Your Rails app should have:

  • Rails 7+ with Hotwire (Turbo & Stimulus)
  • Tailwind CSS for styling
  • ImportMap or Webpack for JavaScript management

New to Rails?

If you're new to Rails, we recommend starting with the Rails Getting Started Guide and learning about Stimulus before using these components.

Installation

1. Stimulus Setup

Most Rails 7+ applications already have Stimulus configured. If not, add it to your Rails app:

# Add to Gemfile
gem "stimulus-rails"

# Run installer
bin/rails stimulus:install

2. Tailwind CSS Setup

Install Tailwind CSS if you haven't already:

# Add to Gemfile
gem "tailwindcss-rails"

# Run installer
bin/rails tailwindcss:install

3. Using Components

Each component on Stimulush provides three things you need to copy:

  • HTML Template: The ERB/HTML structure for your view
  • Stimulus Controller: JavaScript file for interactivity
  • CSS Classes: Tailwind utility classes for styling

Example: Adding a Modal Component

Step 1: Copy the Stimulus Controller

Create app/javascript/controllers/modal_controller.js 

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["modal"]

  open() {
    this.modalTarget.classList.remove("hidden")
  }

  close() {
    this.modalTarget.classList.add("hidden")
  }
}

Step 2: Add HTML to Your View

Add this to your ERB template: 

<div data-controller="modal">
  <button data-action="click->modal#open" 
          class="px-4 py-2 bg-blue-500 text-white rounded">
    Open Modal
  </button>
  
  <div data-modal-target="modal" class="hidden fixed inset-0 bg-black bg-opacity-50">
    <div class="flex items-center justify-center min-h-screen">
      <div class="bg-white p-6 rounded-lg max-w-md w-full mx-4">
        <h2 class="text-xl font-bold mb-4">Modal Title</h2>
        <p class="mb-4">Modal content goes here...</p>
        <button data-action="click->modal#close" 
                class="px-4 py-2 bg-gray-500 text-white rounded">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Step 3: Customize (Optional)

Modify the Tailwind classes and functionality to match your design:

  • Change colors by updating class names (e.g., bg-blue-500 to bg-green-500)
  • Add animations, additional targets, or custom methods to the controller
  • Modify the HTML structure to fit your content needs

What's Next?

Browse Components

Explore our collection of 100+ components organized into categories like Navigation, Forms, and Interactive Elements.

View All Components

Learn Stimulus

New to Stimulus? Check out the official documentation to learn more about this powerful JavaScript framework.

Stimulus Documentation