index.html

---
title: "Design System on Rails"
description: "Powered by ViewComponent, build with tailwindcss, designed by shadcn"
---

<div class="headline">
  <header>
    <h1>Design System on Rails</h1>
    <p>A gem to simplify the view layer of your Rails application</p>
  </header>
</div>


<div class="hero">
  <div class="hero__content">
    <img src="{{ 'assets/images/hero.png' }}" alt="Design System on Rails" >
  </div>
</div>

<div class="intro">
  <div class="intro__content">
    <p>
      Vitrail is a gem that provides a set of components to build a design system on Rails.
      Powered by
        <a href="https://viewcomponent.org/">ViewComponent</a>,
        build with
        <a href="https://tailwindcss.com/">tailwindcss</a>,
        and designed by
        <a href="https://ui.shadcn.com/">shadcn</a>.
    </p>

    <ul>
      <li><a href="{{ '/docs/' | absolute_url }}" class="button" aria-label="Read the docs">Read the docs</a></li>
      <li><a href="https://github.com/kuartz-org/vitrail/" class="button" aria-label="View the source">View the source</a></li>
    </ul>
  </div>
</div>