Classic Rails Installation

Overview

The Classic format uses ERB partials for templates and Stimulus controllers for JavaScript behavior. This is the most common pattern in Rails applications and requires no additional gems.

Best for: Teams familiar with traditional Rails patterns who want minimal dependencies and maximum flexibility.

Project Structure

RailsKit components follow a conventional file organization:

Directory Structure

app/
├── views/
│   └── components/
│       ├── _dropdown.html.erb      # Partial template
│       ├── _modal.html.erb
│       └── ...
└── javascript/
    └── controllers/
        ├── dropdown_controller.js  # Stimulus controller
        ├── modal_controller.js
        └── ...

Installing Partials

For each component, copy the .html.erb file to app/views/components/. The filename should be prefixed with an underscore (Rails partial convention).

1

Create the components directory

Terminal

mkdir -p app/views/components

2

Copy the partial file

From the component page, copy the .html.erb file contents and save it to app/views/components/_component_name.html.erb.

3

Customize as needed

Modify the HTML, CSS classes, or default values to match your application's design system.

Stimulus Controllers

Interactive components include a Stimulus controller for JavaScript behavior. Copy these to app/javascript/controllers/.

Important: After adding a new controller, you may need to restart your Rails server for importmaps to register the new controller.

If you're using importmaps (Rails 7 default), controllers are automatically registered. For other bundlers (esbuild, webpack), ensure the controller is imported in your manifest.

app/javascript/controllers/index.js

import { application } from "controllers/application"

// Import RailsKit controllers
import DropdownController from "controllers/dropdown_controller"
application.register("dropdown", DropdownController)

import ModalController from "controllers/modal_controller"
application.register("modal", ModalController)

Usage Example

Once installed, render components in your views using Rails' render helper:

app/views/layouts/application.html.erb

<%# Render the dropdown component %>
<%= render "components/dropdown",
    label: "Options",
    items: [
      { label: "Edit", href: edit_path(@item) },
      { label: "Delete", href: @item, method: :delete }
    ] %>

Each component's documentation page shows the available parameters and customization options.