Site navigation

Rails

Get started using Primer ViewComponents in your Rails application.

Source

On this page

Primer ViewComponents is an implementation of the Primer Design System, using ViewComponent.

This library is under active pre-1.0 development. Breaking changes are likely in patch releases.

Getting started

In your Gemfile, add:

gem "primer_view_components"

In config/application.rb, add after the application definition:

require "view_component"
require "primer/view_components"

CSS

Load CSS as a JS module into the pipeline. Update app/assets/config/manifest.js with:

//= link primer_view_components.css

Add it in your application.html.erb in the <head> tag:

<%= stylesheet_link_tag("primer_view_components") %>

JS

Optionally, to add the JavaScript behaviours, in your application.html.erb in the <head> tag add:

<%= javascript_include_tag("primer_view_components") %>

Or alternatively, you can install the @primer/view-components npm package and in your JavaScript code add:

import '@primer/view-components'

You can also import only the components you need:

import '@primer/view-components/tab_container'

Usage

Render Primer ViewComponents in Rails templates:

<%= render(Primer::Beta::Counter.new(count: 25)) %>

Dependencies

In addition to the dependencies declared in the gemspec, Primer ViewComponents assumes the presence of Primer CSS.

See the primer/view_components repository for more information about how to use and contribute to Primer ViewComponents. For component-specific documentation, check out the Rails section of component guidelines (example: ActionList).