5 ms·

Show HN: Bloom – A shadcn like UI library for Elixir and Phoenix

I've been writing Elixir for 5 years and made plenty of sites with Phoenix and LiveView but my biggest gripe has always been with the lack of quality UI components available. The JS ecosystem has so many, and it's the one thing I miss from being primarily a React & Node developer. So this is my attempt at bringing some pretty and useful components most applications need to Phoenix projects to try and fill in the gaps between what makes LiveView such a productive joy to work with. The library is very very raw and requires some initial clean up so PRs are very welcome to tidy up the DX as well as the general quality of the repo & components. Hope you like it.

zensavona 2y ago
Looks nice and much needed in the ecosystem. Why not just port shadcn (or rather, franken-ui https://www.franken-ui.dev/ https://www.franken-ui.dev/) to HEEx?
- marcus_cemes 2y ago
  Never heard of shadcn or franken-ui, but they look identical, one links to X (Twitter), the other to Mastodon. What's the story there?
  - madebylaw 2y ago
    Franken UI is an HTML-first, open-source library of UI components based on the utility-first Tailwind CSS with UIkit 3 compatibility. The design is based on shadcn/ui ported to be framework-agnostic.
    - jononomo 2y ago
      In what sense is shadcn not framework agnostic?
      - thangngoc89 2y ago
        It's a React library.
      - ffsm8 2y ago
        not sure if trolling It provides you with templates for react...? How can anyone argue that that's framework agnostic...?
        nasmorn 2y ago
        When all you know is React everything looks like it needs a fat client?
        jononomo 2y ago
        yeah, I just have no idea what shadcn is, so I figured I'd ask for the sake of others who also have no idea.
    - bustylasercanon 2y ago
      Oh wow, I haven't seen Franken UI - this looks great, I can definitely look to port some of these. I guess I've been taking an opinionated approach to start by taking components I had already built from my other projects and compiling them here for now.
    - santa_boy 2y ago
      Thank you. As weird as it can be, I came here looking exactly for an HTML-first option and had a gut feel that I would find it in the comments! Thanks again!!
- deleted 2y ago
  [deleted]
cess11 2y ago
Looks good, thanks for sharing. Will be trying it out during the weekend.
- bustylasercanon 2y ago
  Thank you! I know there are some issues but I'm using it in two projects to try and test the developer experience.
mikhailfranco 2y ago
FYI Bloom is already a language, but it's remote enough that you probably shouldn't care: http://bloom-lang.net/index.html http://bloom-lang.net/index.html It's old, never got to 1.0 and, yes, that's an 'http' without the 's' - positively antediluvian, so don't go near it unless you have a very big ark.
- bustylasercanon 2y ago
  TIL!
nelsonic 2y ago
Great work Chris! Bookmarked (starred) for future use.
- bustylasercanon 2y ago
  Thanks! Hope it's useful for you!
ilrwbwrkhv 2y ago
Nicely done. I do wish that there would be more opinionated component libraries. Every library still has the "bootstrap" style or nowadays every library has the shadcn style. Originality is very important to cultivate in the design world as that can in the future save us from herd like thinking that we say in the flat design apocalypse, for example.
pmarreck 2y ago
Good graphing and calendaring controls would be amazing and useful. We still resort to JS for that stuff We could probably hack together something that outputs direct SVG when given data and chart details
- atonse 2y ago
  Good to look at Keno and what the vega-lite team has done to "standardize" on a format and use that. (for graphs) That's what we did. We really should consider open sourcing our stuff, it's just too ugly at the moment.
- acangiano 2y ago
  For graphing you can use: https://hex.pm/packages/vega_lite https://hex.pm/packages/vega_lite
  - pmarreck 2y ago
    Just noticed that someone built a level above VegaLite: https://hexdocs.pm/tucan/readme.html https://hexdocs.pm/tucan/readme.html
atonse 2y ago
Love this! We started on this path over the last two years of something like this (a component system but also combines a standard behavior for "data sources" so that a table or pagination can just automatically read and modify this datasource). We named it LiveElements and have always wanted to open source it, but it's just not at all clean enough to be put in a state where I'd like others to use it. Our datasource concept is similar to what fop does (and over time, we'd like to look at migrating over to just use fop since it has been around long enough, and we don't want to have our bespoke datasource stuff). But we haven't had the bandwidth to clean up and document it yet. Same with a richer forms engine we've been building where you can just have a compose a type "markdown" which includes changeset validations for markdown formatting, etc. Or a texture of type "SMS" which gives you a character count and looks at the unicode to see how many SMS segments would be used when authoring an SMS message (which is specific to our app but no reason why others can't benefit)

zensavona 2y ago

Looks nice and much needed in the ecosystem. Why not just port shadcn (or rather, franken-ui https://www.franken-ui.dev/ https://www.franken-ui.dev/) to HEEx?

marcus_cemes 2y ago
Never heard of shadcn or franken-ui, but they look identical, one links to X (Twitter), the other to Mastodon. What's the story there?
- madebylaw 2y ago
  Franken UI is an HTML-first, open-source library of UI components based on the utility-first Tailwind CSS with UIkit 3 compatibility. The design is based on shadcn/ui ported to be framework-agnostic.
  - jononomo 2y ago
    In what sense is shadcn not framework agnostic?
    - thangngoc89 2y ago
      It's a React library.
    - ffsm8 2y ago
      not sure if trolling It provides you with templates for react...? How can anyone argue that that's framework agnostic...?
      - nasmorn 2y ago
        When all you know is React everything looks like it needs a fat client?
      - jononomo 2y ago
        yeah, I just have no idea what shadcn is, so I figured I'd ask for the sake of others who also have no idea.
  - bustylasercanon 2y ago
    Oh wow, I haven't seen Franken UI - this looks great, I can definitely look to port some of these. I guess I've been taking an opinionated approach to start by taking components I had already built from my other projects and compiling them here for now.
  - santa_boy 2y ago
    Thank you. As weird as it can be, I came here looking exactly for an HTML-first option and had a gut feel that I would find it in the comments! Thanks again!!
deleted 2y ago
[deleted]

cess11 2y ago

Looks good, thanks for sharing. Will be trying it out during the weekend.

bustylasercanon 2y ago
Thank you! I know there are some issues but I'm using it in two projects to try and test the developer experience.

mikhailfranco 2y ago

FYI Bloom is already a language, but it's remote enough that you probably shouldn't care: http://bloom-lang.net/index.html http://bloom-lang.net/index.html It's old, never got to 1.0 and, yes, that's an 'http' without the 's' - positively antediluvian, so don't go near it unless you have a very big ark.

bustylasercanon 2y ago
TIL!

nelsonic 2y ago

Great work Chris! Bookmarked (starred) for future use.

bustylasercanon 2y ago
Thanks! Hope it's useful for you!

ilrwbwrkhv 2y ago

Nicely done. I do wish that there would be more opinionated component libraries. Every library still has the "bootstrap" style or nowadays every library has the shadcn style. Originality is very important to cultivate in the design world as that can in the future save us from herd like thinking that we say in the flat design apocalypse, for example.

pmarreck 2y ago

Good graphing and calendaring controls would be amazing and useful. We still resort to JS for that stuff We could probably hack together something that outputs direct SVG when given data and chart details

atonse 2y ago
Good to look at Keno and what the vega-lite team has done to "standardize" on a format and use that. (for graphs) That's what we did. We really should consider open sourcing our stuff, it's just too ugly at the moment.
acangiano 2y ago
For graphing you can use: https://hex.pm/packages/vega_lite https://hex.pm/packages/vega_lite
- pmarreck 2y ago
  Just noticed that someone built a level above VegaLite: https://hexdocs.pm/tucan/readme.html https://hexdocs.pm/tucan/readme.html

atonse 2y ago

Love this! We started on this path over the last two years of something like this (a component system but also combines a standard behavior for "data sources" so that a table or pagination can just automatically read and modify this datasource). We named it LiveElements and have always wanted to open source it, but it's just not at all clean enough to be put in a state where I'd like others to use it. Our datasource concept is similar to what fop does (and over time, we'd like to look at migrating over to just use fop since it has been around long enough, and we don't want to have our bespoke datasource stuff). But we haven't had the bandwidth to clean up and document it yet. Same with a richer forms engine we've been building where you can just have a compose a type "markdown" which includes changeset validations for markdown formatting, etc. Or a texture of type "SMS" which gives you a character count and looks at the unicode to see how many SMS segments would be used when authoring an SMS message (which is specific to our app but no reason why others can't benefit)