Senren UI

Get started

Quickstart

Build a real page using only Senren primitives. Five minutes.

Build a card page #

Render a small dashboard using Card, Typography, and Badge:

ERB 
<!-- app/views/dashboard/index.html.erb -->
<div class="mx-auto max-w-5xl px-4 py-10 space-y-6">
  <%= render(Senren::TypographyComponent.new(variant: :h1)) { "Dashboard" } %>

  <%= render Senren::CardComponent.new do |card| %>
    <% card.with_header do %>
      <%= render(Senren::TypographyComponent.new(variant: :h3)) { "Active subscribers" } %>
    <% end %>
    <% card.with_body do %>
      <p class="text-3xl font-semibold">12,438</p>
      <%= render(Senren::BadgeComponent.new(variant: :success)) { "+12% MoM" } %>
    <% end %>
  <% end %>
</div>

The block rule #

A Ruby precedence quirk worth memorizing: { } blocks bind tighter than method calls. When passing a one-liner block to render, parenthesize the receiver:

ERB 
<%= render(Senren::ButtonComponent.new(variant: :primary)) { "Save" } %>
<%= render Senren::ButtonComponent.new(variant: :primary) do %>
  <span>Save</span>
<% end %>

Without parens, the block attaches to .new and the component renders empty.

What next #