Roux Components + docs site

[pangolingo]

We're working on Roux Components (a set of ready-to-use baseline components to be used with Roux).
Work is taking place on the branch component_library_2.

A rough draft of the docs site is online!

This draft needs reviewers. Here's how you can help:

• General
  • Review the docs site's homepage for accuracy and helpfulness
  • Share feedback about the format of the docs
  • Share feedback about what would make Roux Components more useful
• Components
  • Review the components code (HTML and CSS) and share feedback
  • Test on various browsers and devices
  • Review the guidelines for each component for correctness

We also need help with some improvements after this initial version is released. Ideas in no particular order:

Docs site

• Improve general design of the site, including the design of the component examples/previews
• No-js fallback for the component preview tabs
• Roux branding and logo and metadata icons
• CI: Automated accessibility checks for the docs site and component examples/previews
• CI: Automated markup validation for the docs site and component examples/preview
• A button to copy code the the clipboard
• Deduplicate docs between the Roux README.md and docs site, so that they don't get out of sync
• Add Roux and Roux components to thoughtbot's open source page
• Add dark mode support
• Make sure thoughtbot's guides content is reflected in these docs, and link to/from the guides where relevant
• Make it agent-ready: https://isitagentready.com/https://roux.thoughtbot.dev
  • Consider serving markdown to agents https://kittygiraudel.com/2026/03/11/serving-markdown-to-llms-with-11ty/

Components

• Add dark mode support
• Test out Pagy pagination styles to make sure they work correctly with different kinds of Pagy markup
• Offer Typescript code for any JavaScript in components
• Show JSX/React code variants for examples
• Offer more form UI and considerations
  • Use of autocomplete attributes
  • Correct use of name and ID attributes
  • Field hint text
  • Field error states
  • Recommendations for showing optional and required fields
  • Icons inside form inputs
  • Option lists/advanced select lists/multiselects
  • Native HTML validations
  • Use of fieldsets and legends
  • Recommendations around when to disable form submit buttons
  • Recommendations for the inputmode attribute
  • Displaying different validation messages (field-specific warnings and errors, form-wide warnings and errors)
  • Loading, success, error states
  • Use of aria-live when showing form results, especially in SPA apps
• Offer more table UI and considerations
  • Filters
  • Row count/page size display and inputs
  • Table pagination
  • Column sorting
  • Showing/hiding columns
  • Whole-row clickable
  • Use of whitespace: no-break to avoid tall form rows
  • Use of row headers
  • Persisting, page count, filters, sorting state in the URL
  • Data loading, error states
  • Empty state
• Avatar components
• Re-review the modals/dialogs JS code and consider using commandfor/invokers
• Dropdown menu components
• Sidebar/hamburger nav components
• Tooltip/popover components
• Card components
• Recommendations for icon-only button components
• Tab components

[jho406]

For the react versions would you be open to using these types? https://github.com/thoughtbot/candy_wrapper/blob/main/src/types.ts

They're one-to-one with what https://github.com/thoughtbot/form_props generates and its really close to the attributes that rails forms usees.

[pangolingo]

It looks like the metadata icons (favicon, etc) URLs are broken on the live site because the site lives a subpath under thoughtbot.github.io

[pangolingo]

This is now resolved

[pangolingo]

Bug: our robots.txt file is inaccessible because it must be at root, but this docs site lives at a subpath: thoughtbot.github.io/roux/robots.txt

[pangolingo]

This is now resolved

[pangolingo]

I've set up a GitHub project tracking open todos.