# Rails View Components Templates

Last updated: April 30, 2026

Rails view components are Ruby classes that render a specific piece of UI. They are useful when a partial has grown enough logic, variants, or reuse that it deserves a clear interface.

Rails Blocks includes ViewComponent templates for common UI patterns. Copy the component into your app, change the API or Tailwind classes, and keep the code under your control.

## What are Rails view components?

A Rails view component wraps view-related Ruby and markup behind a renderable object. Instead of repeating the same ERB in several templates, you render one component with explicit arguments.

Most Rails apps use the [ViewComponent](https://viewcomponent.org/) gem for this. A typical component has a Ruby class, an ERB template, optional slots, and tests if the rendering behavior matters.

Short definition: Rails view components are reusable UI objects for Ruby on Rails. They put rendering logic and markup in one place and expose a clear API to the rest of the app.

## Why Rails Blocks for view components?

Rails Blocks gives you starting points for common Rails UI components. The templates use ERB, Tailwind CSS, Stimulus where needed, and normal Rails file structure.

- You own the code: rename the class, change the initializer, or split the markup however you like.
- Rails conventions: templates are organized around Rails folders, ERB, helpers, and Stimulus controllers.
- Less setup work: start from a working modal, dropdown, toast, tab, or form pattern.
- Works alongside partials: use ViewComponent templates and [shared partial templates](/docs/shared-partials.md) side by side, depending on what makes each piece of UI easiest to maintain.

## A basic ViewComponent example

A ViewComponent usually starts with a Ruby class that accepts the data needed by the template:

```ruby
# app/components/alert/component.rb
class Alert::Component < ViewComponent::Base
  def initialize(title:, tone: :info)
    @title = title
    @tone = tone
  end
end
```

The component template owns the markup for that UI element:

```erb
<%# app/components/alert/component.html.erb %>
<div class="rounded-lg border p-4">
  <p class="font-medium"><%= @title %></p>
  <div class="text-sm text-neutral-600"><%= content %></div>
</div>
```

Then Rails views can render the component anywhere:

```erb
<%= render Alert::Component.new(title: "Saved", tone: :success) do %>
  Your settings were updated.
<% end %>
```

## When to use view components

Use Rails view components when the same UI appears in multiple places, when the view has variants, slots, state, or branching logic, or when rendering behavior is important enough to test.

Use Rails Blocks templates when you want a concrete starting point instead of a blank component class.

## View components vs shared partials

View components and shared partials are different ways to organize reusable Rails UI. A view component gives the UI a Ruby class and an explicit API. A shared partial keeps the implementation close to ERB.

Neither approach is the final form of the other. Rails Blocks supports both formats so you can choose what makes the code easiest to read, change, and explain to another developer or LLM.

## FAQ

### Is ViewComponent required to use Rails Blocks?

No. You can use Rails Blocks as plain ERB partials, ViewComponent classes, or a mix of both.

### Are Rails view components good for design systems?

Yes, especially when components have variants or need tests. They give repeated UI a stable Ruby API.

### Do Rails Blocks templates work with Hotwire and Stimulus?

Yes. Components that need JavaScript include the relevant Stimulus controller code.