Roux Components

Extend Roux CSS with ready-to-use components to build your project.

Much like Roux CSS, these components are meant as a baseline for you to build on top of, so feel free to adjust as needed. They're flexible and extendable, but opinionated about what matters.

All components are accessible and semantic by default.

Find the code in the Roux repo on GitHub.

Getting Started

To use Roux Components in your project:

1. Copy the component CSS from the Roux GitHub repo
2. Copy the component HTML from the examples on this site
3. Customize both to make them your own

Example: Using the Page Footer Component

Here's how you might use the Page Footer component:

Step 1: Copy the component CSS

Copy the styles from src/css/components/_page-footer.css into your codebase. Don't forget to import them into your app.css:

/* app.css */

+ @import "components/_page-footer.css";

Step 2: Copy the component HTML

Copy the page footer example into your site's HTML.

Step 3: Customize it!

Maybe you don't need a copyright on your site:

/* _page-footer.css */

  .page-footer {
    display: grid;
    grid-template-areas:
-   "copyright"
      "nav";
    grid-template-columns: 1fr;
    …
  }

  <!-- footer.html.erb -->

  <footer class="page-footer">
-   <p class="page-copyright">&copy; 2026 thoughtbot, inc.</p>

    <nav aria-label="Footer menu" class="footer-nav">
      <ul class="page-nav">
        <li>
-         <a href="#">Link 1</a>
+         <a href="/about">About</a>
        </li>
        <li>
-         <a href="#">Link 2</a>
+         <a href="/contact">Contact</a>
        </li>
      </ul>
    </nav>
  </footer>

Components

• Alert

  Alerts provide timely feedback or status updates to users. They communicate information, success states, and errors in a consistent, accessible way.

• Badge

  Badges show a status, count, or label.

• Button

  Buttons trigger actions and help users move through tasks.

• Dialog/Modal

  Modals present focused content that requires the user's attention without navigating away from the page.

• Disclosures

  Disclosures (<details>/<summary>) provide a way to hide and reveal additional content, making pages cleaner while keeping information accessible. They are ideal for FAQs, explanations, or optional details.

• Forms

  Forms collect structured user input and must be accessible, predictable, and easy to navigate.

• Loading Indicator

  Loading indicators show that content is being loaded, processed, or submitted, asking the user to wait.

• Page Footer

  The page footer contains copyright information and secondary navigation.

• Page Header

  The page header contains top-level branding and navigation.

• Pagination

  Pagination allows the user to navigate through pages of content.

• Quote

  Quotes are something someone said, often with a citation.

• Search

  A free-text entry component for finding or filtering content.

• Tables

  Tables present structured data that needs clear relationships between rows and columns.

• Typography

  Roux includes styles for headlines, body text, links and other typographic elements.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/thoughtbot/roux.

Please create a new discussion if you want to share ideas for new features.

This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the code of conduct.

License

Open source templates are Copyright (c) thoughtbot, inc. It contains free software that may be redistributed under the terms specified in the LICENSE file.

Code of Conduct

Everyone interacting in Roux's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.

About thoughtbot

This repo is maintained and funded by thoughtbot, inc. The names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open source software! See our other projects. We are available for hire.