Show HN: Bloom – A shadcn like UI library for Elixir and Phoenix
189 points
14 days ago
| 7 comments
| bloom-ui.fly.dev
| HN
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.

pmarreck
14 days 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

reply
atonse
14 days 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.

reply
acangiano
14 days ago
[-]
For graphing you can use: https://hex.pm/packages/vega_lite
reply
pmarreck
12 days ago
[-]
Just noticed that someone built a level above VegaLite: https://hexdocs.pm/tucan/readme.html
reply
atonse
14 days 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)

reply
nelsonic
14 days ago
[-]
Great work Chris! Bookmarked (starred) for future use.
reply
bustylasercanon
14 days ago
[-]
Thanks! Hope it's useful for you!
reply
ilrwbwrkhv
14 days 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.

reply
cess11
14 days ago
[-]
Looks good, thanks for sharing. Will be trying it out during the weekend.
reply
bustylasercanon
14 days ago
[-]
Thank you! I know there are some issues but I'm using it in two projects to try and test the developer experience.
reply
zensavona
14 days ago
[-]
Looks nice and much needed in the ecosystem. Why not just port shadcn (or rather, franken-ui https://www.franken-ui.dev/) to HEEx?
reply
marcus_cemes
14 days 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?
reply
madebylaw
14 days 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.
reply
santa_boy
14 days 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!!

reply
bustylasercanon
14 days 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.

reply
jononomo
14 days ago
[-]
In what sense is shadcn not framework agnostic?
reply
ffsm8
14 days ago
[-]
not sure if trolling

It provides you with templates for react...? How can anyone argue that that's framework agnostic...?

reply
nasmorn
13 days ago
[-]
When all you know is React everything looks like it needs a fat client?
reply
jononomo
11 days 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.
reply
thangngoc89
14 days ago
[-]
It's a React library.
reply
mikhailfranco
14 days ago
[-]
FYI Bloom is already a language, but it's remote enough that you probably shouldn't care:

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.

reply
bustylasercanon
14 days ago
[-]
TIL!
reply