3 ms·

Haven't checked out Catalyst but I have used TailwindUI. The components are really good but if you are not using a JS framework, it's a lot of work to integrate

Haven't checked out Catalyst but I have used TailwindUI. The components are really good but if you are not using a JS framework, it's a lot of work to integrate. The regular JS version of TailwindUI uses Alpine which doesn't have a CSP compatible version so you will have to write the Javascript from scratch. Partially due to these and frustrated by lack of component libraries in Rails, I built and recently released a UI kit for Rails - https://zestui.com https://zestui.com Built with Phlex, styled with Tailwind with custom built Stimulus controllers. It's got - 25 themes - Dark Mode - Form Builder - Icons - Built in Flash Toast - The components are responsive or have specific mobile views - All the JS needed (Stimulus controllers) is wired up automatically Phlex is a game changer. It is simple, powerful, intuitive and performant. I will never ever write a component as a partial/ViewComponent again. A short video (50 seconds) showing it off: https://youtu.be/OQmDZddLtR8 https://youtu.be/OQmDZddLtR8

__float 3y ago
This is neat! It'd be nice if clicking the blurred background area on a Sheet closed the sheet like the x button does.
- boundlessdreamz 3y ago
  That is planned as an option.i.e the developer decides whether to offer that. Some don't like it because accidental clicks close the sheet/modal which can confuse non tech savvy users.
  - reactordev 3y ago
    I think we are well past the curve on the diffusion of innovation chart on this feature. It’s expected behavior that if a modal is focused and the background is blurred that clicking on the background will close the modal (or initiate close). You can see this for yourself by using a heat-map of your users mouse movement and positioning. Note how many try to close with clicking the background.
    - boundlessdreamz 3y ago
      Maybe and it will be the default. But since this is a UI kit, I will expose an option to turn it off if the developer prefers that in general or in a specific context.
pvsukale3 3y ago
I am a rails dev who bought tailwind ui, and i agree. I have had similar frustrations while integrating. Will give this a shot.
charlie0 3y ago
Stimulus is used to sprinkle JS functionality, but why use it when Vue JS and Svelte are available? Those two are very powerful and also lightweight/minimal.
- boundlessdreamz 3y ago
  Precisely because it can be used to sprinkle JS functionality :) Vue and Svelte are great but adopting them means that you are using Rails as just a backend. For the vast majority of apps, the Rails default stack works really well.
- norman784 3y ago
  For most apps/sites something like Stimulus, htmlx, etc are good enough, also all JS frameworks comes with complexity, now you need a bundler, eslint, prettier, postcss, etc. I can appreciate the simplicity of relying purely on Rails ecosystem or at least very minimum JS that does not require a bundler.
Kiro 3y ago
> which doesn't have a CSP compatible version What do you mean?
- boundlessdreamz 3y ago
  This comment has the details. https://news.ycombinator.com/item?id=34366454 https://news.ycombinator.com/item?id=34366454
reneherse 3y ago
Interesting. There's a similar library called PhlexUI, also in pre-release. https://phlexui.com/ https://phlexui.com/

__float 3y ago

This is neat! It'd be nice if clicking the blurred background area on a Sheet closed the sheet like the x button does.

boundlessdreamz 3y ago
That is planned as an option.i.e the developer decides whether to offer that. Some don't like it because accidental clicks close the sheet/modal which can confuse non tech savvy users.
- reactordev 3y ago
  I think we are well past the curve on the diffusion of innovation chart on this feature. It’s expected behavior that if a modal is focused and the background is blurred that clicking on the background will close the modal (or initiate close). You can see this for yourself by using a heat-map of your users mouse movement and positioning. Note how many try to close with clicking the background.
  - boundlessdreamz 3y ago
    Maybe and it will be the default. But since this is a UI kit, I will expose an option to turn it off if the developer prefers that in general or in a specific context.

pvsukale3 3y ago

I am a rails dev who bought tailwind ui, and i agree. I have had similar frustrations while integrating. Will give this a shot.

charlie0 3y ago

Stimulus is used to sprinkle JS functionality, but why use it when Vue JS and Svelte are available? Those two are very powerful and also lightweight/minimal.

boundlessdreamz 3y ago
Precisely because it can be used to sprinkle JS functionality :) Vue and Svelte are great but adopting them means that you are using Rails as just a backend. For the vast majority of apps, the Rails default stack works really well.
norman784 3y ago
For most apps/sites something like Stimulus, htmlx, etc are good enough, also all JS frameworks comes with complexity, now you need a bundler, eslint, prettier, postcss, etc. I can appreciate the simplicity of relying purely on Rails ecosystem or at least very minimum JS that does not require a bundler.

Kiro 3y ago

> which doesn't have a CSP compatible version What do you mean?

boundlessdreamz 3y ago
This comment has the details. https://news.ycombinator.com/item?id=34366454 https://news.ycombinator.com/item?id=34366454

reneherse 3y ago

Interesting. There's a similar library called PhlexUI, also in pre-release. https://phlexui.com/ https://phlexui.com/