Module

Scaffolds

Rails UI supplies pre-designed scaffolds in addition to the Rails defaults. To accomplish this you can run an alternative generator when scaffolding a new resource.

Custom scaffold generator

bash

rails generate railsui:scaffold ModelName

The custom scaffold generator performs the same function as the default but uses alternative view templates when generating. Below is an example of each template for the Hound theme.

Note: Changing your Rails UI theme will not automatically update existing scaffolds to match the new theme.

Index

Posts

New Post

Title

Example post title

Content

Example post content

Created 1 minute ago

View post

Title

Example post title 2

Content

Example post content 2

Created 1 minute ago

View post

index.html.erb
index.haml.erb

<div class="max-w-3xl mx-auto px-4 my-16">
  <div class="flex items-center justify-between pb-6 border-b dark:border-slate-700">
    <h1 class="h2">Posts</h1>
    <div class="flex items-center justify-end">
      <%= link_to "New Post", new_post_path, class: "btn btn-primary" %>
    </div>
  </div>

  <div id="posts" class="divide-y divide-slate-200/90 dark:divide-slate-700 mb-10">
    <% @posts.each do |post| %>
      <div class="py-3">
        <%= render post %>

        <%= link_to "View post", post, class: "btn-link my-3 inline-block" %>
      </div>
    <% end %>
  </div>
</div>

.max-w-3xl.mx-auto.px-4.my-16
  .flex.items-center.justify-between.pb-6.border-b.dark:border-slate-700
    %h1.h2 Posts
    .flex.items-center.justify-end
      = link_to "New Post", new_post_path, class: "btn btn-primary"
  #posts.divide-y.dark:divide-slate-700.mb-10
    - @posts.each do |post|
      .py-3
        = render post
        = link_to "View post", post, class: "btn-link my-3 inline-block"

Show

post #1

Edit

Title

Example post title 2

Content

Example post content 2

Created 1 minute ago

show.html.erb
show.haml.erb

<div class="max-w-3xl mx-auto px-4 my-16">
  <div class="pb-6 border-b border-gray-200/90 dark:border-slate-700">
    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
      <ol class="flex flex-wrap items-center gap-3">
        <li>
          <%= link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
        </li>
        <li class="flex gap-3">
          <div class="flex items-center">
            <span class="text-slate-300 dark:text-slate-500">/</span>
          </div>
          <span class="text-primary-600 dark:text-primary-500" aria-current="page">
            #<%= @post.id %>
          </span>
        </li>
      </ol>
    </nav>
    <div class="flex items-center justify-between">
      <h1 class="h2 flex-1">post #<%= @post.id %></h1>
      <%= link_to "Edit", edit_post_path(@post), class: "btn btn-light" %>
    </div>
  </div>
  <%= render @post %>
</div>

.max-w-3xl.mx-auto.px-4.my-16
  .pb-6.border-b.dark:border-slate-700{class: "border-gray-200/90"}
    %nav.my-6.font-medium.flex.text-slate-500.dark:text-slate-200.text-sm{"aria-label" => "breadcrumb"}
      %ol.flex.flex-wrap.items-center.gap-3
        %li
          = link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400"
        %li.flex.gap-3
          .flex.items-center
            %span.text-slate-300.dark:text-slate-500 /
          %span.text-primary-600.dark:text-primary-500{"aria-current" => "page"}
            \##{@post.id}
    .flex.items-center.justify-between
      %h1.h2.flex-1
        post ##{@post.id}
      = link_to "Edit", edit_post_path(@post), class: "btn btn-light"
  = render @post

New

New Post

new.html.erb
new.haml.erb

<div class="max-w-3xl mx-auto px-4 my-16">
  <div class="mb-4 pb-6 border-b border-gray-200/90 dark:border-slate-700">
    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
      <ol class="flex flex-wrap items-center space-x-3">
        <li>
          <%= link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
        </li>
        <li class="flex space-x-3">
          <div class="flex items-center">
            <span class="text-slate-300 dark:text-slate-500">/</span>
          </div>
          <span class="text-primary-600 dark:text-primary-500" aria-current="page">New</span>
        </li>
      </ol>
    </nav>
    <h1 class="h2">New Post</h1>
  </div>

  <div>
    <%= render "form", post: @post %>
  </div>
</div>

.max-w-3xl.mx-auto.px-4.my-16
  .mb-4.pb-6.border-b.dark:border-slate-700
    %nav.my-6.font-medium.flex.text-slate-500.dark:text-slate-200.text-sm{"aria-label" => "breadcrumb"}
      %ol.flex.flex-wrap.items-center.space-x-3
        %li
          = link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400"
        %li.flex.space-x-3
          .flex.items-center
            %span.text-slate-300.dark:text-slate-500 /
          %span.text-primary-600.dark:text-primary-500{"aria-current" => "page"} New
    %h1.h2 New Post
  %div
    = render "form", post: @post

Edit

Edit Post

edit.html.erb
edit.haml.erb

<div class="max-w-3xl mx-auto px-4 my-16">
  <div class="mb-4 pb-6 border-b border-gray-200/90 dark:border-slate-700">
    <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 dark:text-slate-200 text-sm">
      <ol class="flex flex-wrap items-center space-x-3">
        <li>
          <%= link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400" %>
        </li>
        <li class="flex space-x-3">
          <div class="flex items-center">
            <span class="text-slate-300 dark:text-slate-500">/</span>
          </div>
          <span class="text-primary-600 dark:text-primary-500" aria-current="page">Edit</span>
        </li>
      </ol>
    </nav>
    <div class="flex items-center justify-between">
      <h1 class="h2">Edit Post</h1>
      <%= button_to "Delete", @post, method: :delete, class: "btn btn-light", form: { data: { turbo_confirm: "Are you sure?" } } %>
    </div>
  </div>

  <div>
    <%= render "form", post: @post %>
  </div>
</div>

.max-w-3xl.mx-auto.px-4.my-16
  .mb-4.pb-6.border-b.dark:border-slate-700{class: "border-gray-200/90"}
    %nav.my-6.font-medium.flex.text-slate-500.dark:text-slate-200.text-sm{"aria-label" => "breadcrumb"}
      %ol.flex.flex-wrap.items-center.space-x-3
        %li
          = link_to "Posts", posts_path, class: "hover:underline hover:text-slate-600 dark:hover:text-slate-400"
        %li.flex.space-x-3
          .flex.items-center
            %span.text-slate-300.dark:text-slate-500 /
          %span.text-primary-600.dark:text-primary-500{"aria-current" => "page"} Edit
    .flex.items-center.justify-between
      %h1.h2 Edit Post
      = button_to "Delete", @post, method: :delete, class: "btn btn-light", form: { data: { turbo_confirm: "Are you sure?" } }
  %div
    = render "form", post: @post

Partial

Title

Example post title 2

Content

Example post content 2

Created 1 minute ago

_post.html.erb
_post.haml.erb

<article id="<%= dom_id post %>" class="py-6 prose dark:prose-invert">
  <div>
    <p class="mb-0 font-semibold">
      Title
    </p>
    <p class="mt-0">
      <%= post.title %>
    </p>
  </div>
  <div>
    <p class="mb-0 font-semibold">
      Content
    </p>
    <p class="my-0">
      <%= post.content %>
    </p>
  </div>
  <time class="text-slate-600 dark:text-slate-400 text-xs mt-2" datetime="<%= post.created_at.to_formatted_s(:long) %>">Created <%= time_ago_in_words(post.created_at) + " ago" %></time>
</article>

%article.py-6.prose.dark:prose-invert{id: "#{dom_id post }"}
  %div
    %p.mb-0.font-semibold
      Title
    %p.mt-0
      = post.title
  %div
    %p.mb-0.font-semibold
      Content
    %p.my-0
      = post.content
  %time.text-slate-600.dark:text-slate-400.text-xs.mt-2{datetime: "#{post.created_at.to_formatted_s(:long)}"} Created
    = time_ago_in_words(post.created_at) + " ago"

Image

Forms

Scaffolds

Custom scaffold generator

Index

Posts

Show

post #1

New

New Post

Edit

Edit Post

Partial

On this page