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/
Awesome work and hope your gov't sees the value of this work and oss work in general!
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.
Bootstrap (like Tailwind and others) has a configuration for generating the full component class and styles from a few variables, so updates to fonts, colors, spacing, etc were easy to manage and roll out to wide usage incrementally.
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.
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:
Just want to say I stumbled across your Youtube channel a while back and have been delighted by the content. Keep up the good work!
With custom elements you can just drop `<my-dropdown>` in your server template and that's where the dropdown widget will be.
Something like Shoelace[1] would be very nice to use with Rails.
All the reasons are here: https://dev.to/stuffbreaker/web-components-and-ssr-2024-edit...
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.
One of the things most frequently ignored on the comparison chart is the fact that there's a massive ecosystem of free and paid Bootstrap themes which can massively shortcut development.
There's so much bikeshedding and yak shaving when it comes to this topic. Folks spending their time considering options that also won't be Cool in two years instead of actually building The Thing.
Tailwind has really rekindled my joy in creating views.
