Roux CSS & Components

A boilerplate of native CSS architecture, styling, and HTML to kickstart your project.

Roux gives you an organized foundation of CSS files, variables, base styles, and simple HTML components so you can start building immediately instead of setting everything up from scratch. It's a structured starting point for writing your own CSS and HTML—not a framework like Tailwind or Material UI. Think of it like a GitHub template repo, but for your stylesheets and basic component markup.

You can cherry-pick what you need, use it for inspiration, or adopt the whole system—whatever works for your project. It's flexible and extendable, but opinionated about what matters. All HTML components aim to be accessible and semantic by default.

You may have used Bitters and Refills in the past—move on over to a fully native setup with Roux.

Find the code in the Roux repo on GitHub.

Getting Started

Check out the GitHub README for all the details on how to use Roux. Then come back here to grab the HTML for components.

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.

• Form

  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.

• Table

  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.