Docs
Helpers

Helpers

Rails UI includes several view helpers to streamline common patterns. These helpers are automatically available in your views when the gem is installed.

railsui_meta_tags

The railsui_meta_tags helper generates all essential meta tags for SEO and social sharing in a single method call. It outputs title, description, Open Graph, social card (X/Twitter), viewport, and favicon tags.

Basic Usage

In your app/views/rui/shared/_meta.html.erb partial (rendered via railsui_head):

<%= railsui_meta_tags(
  title: "Welcome",
  description: "Build beautiful Rails apps faster with Rails UI."
) %>

This generates complete meta tags including:

  • Title tag with site name
  • Charset (UTF-8) and viewport meta tags
  • Mobile web app capable meta tags
  • Description meta tag
  • Canonical URL
  • Open Graph tags (og:title, og:type, og:url, og:image, og:description, og:site_name)
  • Social card tags (twitter:card, twitter:title, twitter:description, twitter:image)
  • Favicon links (SVG icon and Apple touch icon)

Available Options

Option Default Description
site Railsui.config.application_name Site name appended to page titles
title nil Page-specific title (combined with site as "Title | Site")
description nil Page description for SEO and social sharing
image "railsui/meta/opengraph.jpg" Open Graph image (1200x630 recommended)
card_image "railsui/meta/opengraph-mark.jpg" Social card image (400x400 for summary cards)
og_type "website" Open Graph type (website, article, product, etc.)
card_type "summary" Social card type (summary or summary_large_image)

Full Example 

<%= railsui_meta_tags(
  site: "My App",
  title: "About Us",
  description: "Learn more about our company and mission.",
  image: "meta/about-opengraph.jpg",
  card_image: "meta/about-card.jpg",
  og_type: "website",
  card_type: "summary_large_image"
) %>

Per-Page Customization

Override meta tags on specific pages by passing options in your view or controller:

<% content_for :head do %>
  <%= railsui_meta_tags(
    title: "About Us",
    description: "Meet the team behind the product."
  ) %>
<% end %>

Tip: Use absolute URLs for images when sharing on social platforms. The helper automatically converts asset paths to full URLs using image_url.

Custom Images

Replace the default Open Graph and social card images in app/assets/images/railsui/meta/:

  • opengraph.jpg — Main sharing image (1200x630px recommended)
  • opengraph-mark.jpg — Square card image (400x400px)
  • favicon.svg — SVG favicon
  • apple-touch-icon.png — iOS home screen icon (180x180px)

Preview Tools

Test how your meta tags appear on social platforms:

railsui_head

The railsui_head helper renders the app/views/rui/shared/_railsui_head.html.erb partial, which bundles meta tags, fonts, and third-party stylesheets for your theme.

<head>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= yield :head %>

  <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
  <%# JavaScript varies by build mode: %>
  <% if Railsui.config.build_mode == "build" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
  <% else %>
    <%= javascript_importmap_tags %>
  <% end %>

  <%= railsui_head %>
</head>

This partial typically includes:

<%= render "rui/shared/meta" %>
<%= render "rui/shared/fonts" %>
<%= stylesheet_link_tag "https://cdn.example.com/library.css", "data-turbo-track": "reload" %>
<%= yield :head %>

railsui_body_classes

Returns body classes configured in railsui.yml combined with any classes added via content_for :body_classes.

<body class="<%= railsui_body_classes %>">
  <%= yield %>
</body>

<% content_for :body_classes, "overflow-hidden" %>
Configuration App kits

On this page

Get all updates directly to your inbox.
Sign up for the newsletter.

    We won't send you spam. Unsubscribe at any time.