Design System Options for Rails
Not to nitpick terminology, but I don't think it's helpful to equate "design system" with component library. A design system is the design tokens used to describe an organization's application(s), and largely independent of the exact technologies.
I worked with our UX team at a mixed tech company (Rails, React, mobile) who defined the patterns and tokens, and then my team implemented so that we could use across our stack.
Largely this was accomplished via ensuring the design system could be used via CSS and we settled on Bootstrap with custom theme. This made it easy enough to use across Rails views/view components and React components.
Bootstrap is not sexy to devs now but you could do same with Tailwind and Daisy UI with custom theme.
With that said, component libraries are really helpful, but I prefer to align them with the design system and not the other way around.
I came across CSS Zero recently:
https://csszero.lazaronixon.com/lookbook/pages/overview
which bills itself as an "opinionated front-end starter kit" specifically for Rails and includes Stimulus.js code for JavaScript functionality.
It seems the benefits are that it is no build (pure CSS with CSS variables) and easy to modify and extend.
Totally get the struggle — I spent way too many hours figuring which design system should I use for my next project. Ended up creating a site to compare the options: [https://rails.style]. Might help others in the same spot.
I'm currently building one called Nitro Kit.
Everyone seems to have their own opinion on what something like this should and should be or do. Nitro Kit is my opinion and I'm getting a lot of joy from using it on my own sites and services.
It's free and open source and, full disclaimer, there's a paid premium offering too.
Here's a video about my reasoning behind building it:
It’s too bad most UI libraries ate tied to a particular framework like React, Tailwind, etc. instead of self-contained web component elements.
Github's https://primer.style/product/getting-started/ does a good job of making a cohesive design language that works just as well for server-rendering Ruby views and "upgrading" parts of the ui to React views when you need more interactivity. That's a constraint that I wish more of the Rails ecosystem design tooling would attempt to solve for.
Just saw a BugBytes video for a new one that might be interesting - https://devdojo.com/pines
I really think that a design system solution has to be framework/implementation agnostic. It’s why I’ve never been too interested in shadcn, impressive though it may be.
Right now I’m trying to build a tool that produces an intermediate representation of your UI components, which can then be transpiled into whatever target format you prefer.
That way we can build design systems that aren’t coupled to a specific downstream tech stack.
I am curious - why is Bootstrap not on the list?
I use TailwindUI for many of my rails projects. Or just grab some Tailwind things from around the web.
Tailwind has really rekindled my joy in creating views.
Is RailsUI superior to all of these?
I think now the ergonomics are now better - use vite-ruby, inertia.js and your fav design library with rails either with Vue | React | Svelte.
Obviously niche, but the GOV.UK Design System is very well supported in Rails.
There's a form builder and library of components (built and maintained by me) which, between them, provide full coverage. Most new Rails services use them.
It's a good match because accessibility is one of the Design Systems' primary concerns so JavaScript is used very sparingly and only to enhance.
They're not official, only Nunjucks is supported by the Design System team.
https://design-system.service.gov.uk/
https://govuk-form-builder.netlify.app/
https://govuk-components.netlify.app/