Requirements
Backend
Ruby 3.2.3+
Rails 7.0.8+
ViewComponent gem
Frontend
Node.js 18+
Vite asset compilation
TailwindCSS 4.0
Installation
1
Add Required Gems
# Gemfile
gem 'view_component'
gem 'vite_rails'
gem 'turbo-rails'
# Optional — enhanced functionality
gem 'pagy', '~> 9.3.4' # Pagination
gem 'gretel' # Breadcrumbs
gem 'meta-tags' # SEO meta tags
gem 'image_processing', '~> 1.2' # Image uploads
gem 'shrine', '~> 3.0' # File uploads
2
Add Frontend Dependencies
# package.json — dependencies
"@hotwired/stimulus": "^3.2.2",
"@hotwired/turbo-rails": "^8.0.2",
"choices.js": "^11.1.0",
"stimulus-textarea-autogrow": "^4.1.0",
"stimulus-use": "^0.52.2"
# devDependencies
"@tailwindcss/vite": "^4.0.6",
"tailwindcss": "^4.0.6",
"vite": "^7.1.7",
"vite-plugin-rails": "^0.5.0"
3
Install & Run
bundle install && yarn install
# Start development
bin/rails server # Rails server
yarn dev # Vite dev server
Tip
Use Overmind
with
Procfile.dev to start everything with a single command.
4
Copy Components
Recommended
Clone the full template for best results — all dependencies and configs are already wired up.
Or copy only what you need:
app/components/ui/
UI component classes and templates
app/assets/controllers/
Stimulus controllers
app/assets/stylesheets/components/
Component styles
app/lib/form_builders/
Custom form builder
Component Structure
Each component follows a consistent pattern:
app/components/ui/[component_name]/
├── component.rb # Main component class
├── component.html.erb # Template (when needed)
├── component.css # Component-specific styles
├── component_controller.js # Stimulus controller (when needed)
├── header_component.rb # Sub-component (flat structure)
└── body_component.rb # Sub-component (flat structure)