Title
Example post title
Content
Example post content
Module
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.
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.
<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"
Title
Example post title 2
Content
Example post content 2
<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
<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
<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
Title
Example post title 2
Content
Example post content 2
<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"