Senren
UI.
A production-grade component library for Rails apps. Source-copied, Hotwire-native, and built so AI agents can read and extend it without breaking your design system.
bundle add senren-ui
bin/rails generate senren:install
bin/rails senren:add button card dialog form
<%= render Senren::CardComponent.new do |card| %>
<% card.with_header do %>
<%= render(Senren::TypographyComponent.new(variant: :h3)) { "Welcome back" } %>
<% end %>
<% card.with_body do %>
<p class="text-sm">Your Senren UI starts here.</p>
<% end %>
<% card.with_footer do %>
<%= render(Senren::ButtonComponent.new(variant: :primary)) { "Continue" } %>
<% end %>
<% end %>
Why Senren
Built for the way Rails actually ships.
ViewComponent native
Every primitive is a ViewComponent. Variants, slots, content. No DSL to learn beyond Rails.
Hotwire & Turbo
Server-rendered first. Stimulus only for local UI behavior. No SPA, no global state framework.
Source-copy architecture
Components are copied into your app. You own the source, not a black box.
AI-agent ready
Centralized .senren/skill.md, llms.txt, llms-full.txt. AI agents read your design system, not guess.
TailwindCSS tokens
Semantic design tokens (background, foreground, primary, muted) drive every component. Theming is one CSS file.
Production-grade v1.2
Sixty-two components across eight categories. Ship with confidence.
Showcase
A few of the primitives.
Sixty-two components, eight categories. Every one is yours after install — readable, editable, owned.
Button
Six variants, three sizes, icon-friendly.
Badge
Status, priority, count.
Card
Header, body, footer slots.
Pro plan
Everything in Hobby, plus advanced analytics.
Form primitives
Label, Input, Textarea, NativeSelect.
Alert
Info, success, warning, destructive.
Heads up
Avatar & Skeleton
Identity & loading states.
AI agents
Designed to be read by machines.
Every install creates .senren/skill.md,
a centralized component map grouped by Actions, Forms, Overlays, Navigation, Layout, Data Display, SaaS Blocks, and Rich Content.
Every component declares its purpose, dependencies, accessibility rules,
AI agent rules, and anti-patterns.
Plus public/llms.txt and
public/llms-full.txt — an emerging standard for letting agents discover your local design system.
## Component: Dialog
Category: Overlay
Depends on:
- Button
- senren--dialog Stimulus controller
Pairs with:
- FormField
- Button
- AlertDialog
Use for:
- confirmation modal
- short create/edit form modal
Avoid:
- long multi-step workflows
- full-page replacement
Agent rules:
- Always include a visible title.
- Preserve Escape key close behavior.
- Preserve focus management.
- Use Stimulus only for open/close/focus.
- Do not introduce React, Vue, Alpine, or
external modal libraries.