Open Source

Beautiful UI Components for Ruby on Rails

A collection of accessible, customizable components built with ViewComponent and Tailwind CSS. Copy and paste into your Rails app. No dependencies.

Browse Components View Demos

Revenue

$24.5k +12%

Users

1,234

JD

AK

ML

Weekly Overview Live

JD Jane Doe	Active
AK Alex Kim	Away

See it in action

Real components, composed into a real interface

Revenue

$24,563 +12.5%

Active Users

1,234

JD

AK

ML

Tasks Complete

85% 17/20

Weekly Overview

Activity

Deployment completed successfully

SK

Sarah K. pushed to main

2 hours ago

RJ

Ryan J. completed API redesign

4 hours ago

Server load above 80% threshold

Team Members

Member	Role	Status
JD Jane Doe jane@example.com	Lead Designer	Active
AK Alex Kim alex@example.com	Backend Engineer	Active
ML Maria Lopez maria@example.com	Product Manager	Away

Explore all 22 components

Why RailsViewKit

Built for the Rails ecosystem

ViewComponent Based

Built on GitHub's ViewComponent for testable, reusable, and encapsulated view code.

Tailwind CSS

Styled with Tailwind CSS. Customize colors, spacing, and more with CSS variables.

Copy & Paste

No npm packages or gem dependencies. Just copy the components you need into your app.

Stimulus Ready

Interactive components use Stimulus controllers. Works seamlessly with Hotwire.

Dark Mode

Every component supports dark mode out of the box with automatic system detection.

Responsive

Mobile-first design. Components look great on any screen size.

Developer Experience

Clean, intuitive API

Components that feel natural in your Rails views

Card Title

Your content here...

index.html.erb

<%= render Rvk::ButtonComponent.new(
  variant: :primary,
  size: :lg
) do %>
  Click me
<% end %>

<%= render Rvk::CardComponent.new do |card| %>
  <% card.with_header do %>
    Card Title
  <% end %>

  Your content here...

  <% card.with_footer do %>
    <%= render Rvk::ButtonComponent.new { "Save" } %>
  <% end %>
<% end %>

Demo Pages