Welcome Page

How to get started with Bloom

Head over to the Github page for more information. See github for the full installation guide.

Motivation

I make a lot of Phoenix projects, and the biggest thing that makes me jealous of React and the JS ecosystem is the plethora of beautiful component libraries they can pick and choose from. Shadcn in particular has a lovely pattern of providing a CLI tool that lets you npx install components into your codebase so you can have a great starting point and edit from there.

This is my attempt at bringing this to Phoenix and Elixir. If anything, I'll be using it for styling my future projects even easier. These components so far are a rough collection from components I have built and been inspired by online which have made it into my projects. I'll be adding a showcase soon.

Contribution

This is a very rough repository so contributions are welcome. New components, improving how it's managed, improving the tasks for installation and making them smarter. There's lots to do.

No JavaScript?

Not yet anyway. Nothing against JS, I love Svelte and have years of experience with React, I just want to not rely on it until it's really necessary. You can get pretty far these days with what the browser gives you (and LiveView.JS is an option too). So no, no Alpine until it's really required.

Installation

Can be installed by adding bloom to your list of dependencies in mix.exs:

def deps do
    [
      {:bloom, "~> 0.0.7"}
    ]
  end

Relies on Phoenix being installed.

Installing components

All components can be installed by running the following mix command in your project root:

mix bloom.install <component_name>

Some components require Tailwind Config changes - refer to the component doc for more information.

View all components by running:

mix bloom.install help