Installation

New applications

Tailwind CSS and modern JavaScript is required for Rails UI. The easiest install is on new Rails apps with options passed like so.

rails new my_app_name -c tailwind -j esbuild

For new apps, use the -c tailwind option to install Tailwind CSS effortlessly.

Use the -j flag to assign one of the bundling solutions from the jsbundling-rails gem (bun, esbuild rollup, webpack) for max compatibility.

Support for importmaps or propshaft is currently unsupported, but I'm working on it!

Existing applications

CSS

For an existing app you need to first install Tailwind if you haven't. If you're already using another CSS framework like Bootstrap you will need to remove that first for best results.

./bin/bundle add cssbundling-rails
./bin/rails css:install:tailwind

Note: There are several ways to approach adding Tailwind CSS support. We find the easiest way is using cssbundling-rails gem for max control. If you were to scaffold a new rails application, this gem is the one used when passing -c. Please note that Rails UI does not leverage the dedicated tailwindcss-rails ruby gem at this time.

Adding Tailwind CSS to an existing app may result in CSS class name conflicts. We've done our best to make it integrate with your existing setup but there's always a chance.

JavaScript

Rails UI works best combined with the jsbundling-rails gem.

When ready, install jsbundling-rails using the gem and the installer task. Choose the build tool you prefer.

./bin/bundle add jsbundling-rails
./bin/rails javascript:install:[bun|esbuild|rollup|webpack]

Most of the JavaScript used in Rails UI is based on Stimulus.js. This code can likely work fine alongside something like importmaps or propshaft but we have not tested this theory just yet.

Install the gem

Add the railsui gem to your Gemfile.

# Gemfile
gem "railsui"

Run the bundle install command to fetch the new gem and its assets from rubygems.org.

bundle install

If you're a new or existing subscriber, check your account dashboard or the private repo README for detailed instructions on how to install and gain access to the premium version of Rails UI.

Run the installer

The gem includes several tasks and generators. Run the install task to kick things off.

This task is responsible for setting the foundation for Rails UI, which includes assets, templates, template-specific pages, and more.

rails railsui:install

Boot the app

Boot the new app and visit the root path (i.e. localhost:3000). This should present a new page with some actions to areas related to Rails UI.

./bin/dev

From there, you may proceed to configure your app.