Senren UI

Get started

Installation

Senren installs as a Rails gem. The install generator scaffolds a base ViewComponent class, design tokens, AI-agent files, and a centralized skill map.

Requirements #

Senren targets modern Rails.

  • · Ruby >= 3.2
  • · Rails >= 7.1
  • · view_component
  • · tailwindcss-rails (or any Tailwind v3 / v4 setup)
  • · importmap-rails + turbo-rails + stimulus-rails

1. Add the gem #

Gemfile
# Gemfile
gem "view_component"
gem "senren-ui", require: "senren/rails"

2. Install #

Terminal
bundle install
bin/rails generate senren:install

The generator creates these files:

.senren/skill.md Centralized AI agent guide
.senren/registry.yml Mirror of the gem registry
.senren/installed_components.yml Local install ledger
.senren/conventions.md Editable conventions document
app/components/senren/base_component.rb ViewComponent base class
app/assets/stylesheets/senren.css Design tokens (light + dark)
public/llms.txt Short agent-facing doc
public/llms-full.txt Complete agent-facing doc

3. Add components #

Components are added on demand via senren:add. Each one is copied into app/components/senren/ and is yours to edit.

Shell
# Install foundation components
bin/rails senren:add button card badge typography separator skeleton avatar alert

# Install form components
bin/rails senren:add label form input textarea native_select switch

# Install overlays (Stimulus controllers included)
bin/rails senren:add dialog alert_dialog dropdown_menu popover tooltip

4. Wire stylesheets #

Add the Senren design tokens stylesheet to your application layout:

ERB
<!-- app/views/layouts/application.html.erb -->
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "senren", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>

5. Verify with doctor #

Run the doctor command to confirm every dependency is wired correctly:

Shell
bin/rails senren:doctor

Next: Quickstart

Build a real page using the components you just installed.

Continue