New to Rails UI?
Start here to learn how to use Rails UI as a product acceleration system, then install in minutes.
Documentation Guide
This documentation covers everything you need to install, configure, and use Rails UI in your Rails applications.
Getting Started
- Start here — How to use Rails UI as a product acceleration system
- Quick Start — Install Rails UI and set up a kit in minutes
- Installation — Detailed installation steps, requirements, and migration scenarios
- Configuration — Configure themes, colors, pages, and build modes
Building with Rails UI
- App kits — Available app kits and their use cases
- Components — UI components: buttons, badges, cards, modals, and more
- Forms — Form inputs, validation states, and form builder patterns
- Icons — Using the icon helper and available icon sets
- JavaScript — Stimulus controllers and interactive behavior
Reference
- Helpers — View helpers for meta tags, navigation, and layouts
- Commands — Rake tasks and generators (
railsui:install, railsui:scaffold)
- Troubleshooting — Common issues and solutions
- FAQs — Frequently asked questions
What's Included
-
8 themes — Each with distinct styling for different use cases (SaaS dashboards, marketing sites, admin panels)
-
200+ components — Buttons, forms, modals, tables, cards, and more with dark mode support
-
Pre-designed pages — Authentication flows, dashboards, settings, profiles, and CRUD views
-
Email templates — Styled ActionMailer templates matching your theme
File Structure
After installation, Rails UI adds these directories to your app:
app/
├── assets/
│ ├── images/railsui/ # Theme images and icons
│ └── stylesheets/railsui/ # Theme CSS files
├── javascript/
│ └── controllers/ # Stimulus controllers (rui_*.js)
└── views/
└── rui/ # Theme layouts, pages, and partials
├── layouts/
├── pages/
└── shared/
config/
└── railsui.yml # Rails UI configuration
Files in app/views/rui/ are yours to customize. Copy them to other directories to prevent overwrites when changing themes.
Key Concepts
- Theme-driven — Components and pages are tied to your active theme. Changing themes updates styling across your app.
- Copy-and-own — All generated code belongs to you. There's no framework lock-in or proprietary DSL.
- ERB + Tailwind — Standard Rails ERB templates styled with Tailwind CSS. Customize with familiar tools.
