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.1
· Rails >= 7.1
· view_component
· tailwindcss-rails (or any Tailwind v3 / v4 setup)
· importmap-rails + turbo-rails + stimulus-rails

For AI agents #

Using an AI coding agent? Paste this prompt and let it handle everything.

Copy this prompt into Cursor, Copilot Chat, Claude, or Codex

The agent will add the gem, run the install generator, add components, sync agent instruction files, and verify the setup — all in one go.

Master prompt

You are setting up Senren UI in a Rails application.

Senren UI is a Rails-native component library built on ViewComponent,
Hotwire (Turbo + Stimulus), and TailwindCSS.

Steps:
1. Add these gems to the Gemfile:
     gem "view_component"
     gem "senren-ui", require: "senren/rails"
   Then run: bundle install

2. Run the install generator:
     bin/rails generate senren:install

3. Add components you need:
     bin/rails senren:add button card badge alert dialog form input textarea

4. Sync agent instruction files:
     bin/rails senren:agents:sync

5. Verify the installation:
     bin/rails senren:doctor

Rules after setup:
- Always read .senren/skill.md before writing UI code.
- Use Senren components before writing custom HTML.
- Use ViewComponent for reusable UI.
- Use Turbo for server state, Stimulus only for local behavior.
- Do not add React, Vue, Alpine, or any external state framework.
- Use semantic Tailwind tokens (--senren-background, --senren-foreground, etc).
- Do not hard-code color families like gray-*, slate-*, zinc-*.

Reference: https://www.senren-ui.dev/llms-full.txt

Manual installation #

Prefer doing it yourself? Follow these five steps.

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)

.senren/agent-rules.md AI agent source of truth

AGENTS.md Codex adapter (marker-managed)

CLAUDE.md Claude adapter (marker-managed)

.github/copilot-instructions.md Copilot adapter (marker-managed)

.cursor/rules/senren.mdc Cursor adapter (marker-managed)

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