Skip to content
Bulma Widgets using Phoenix LiveView Components
Branch: master
Clone or download

Latest commit

Latest commit e13d375 Mar 23, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
lib modifying items api Mar 23, 2020
test initial repo Mar 21, 2020
.gitignore initial repo Mar 21, 2020 Update Mar 21, 2020
mix.exs fix bug with dropdown Mar 21, 2020
mix.lock updating deps Mar 21, 2020


Simple LiveComponent wrappers around Bulma "widgets" for Phoenix LiveView. This library is intended to wrap the basic Bulma elements into largely self-contained components making developing interactive UI's in LiveView much simpler. There are a few additional components for use on touch screen and embedded devices for basic's like number inputs. In the future I'd like to have a simialr library for Bootstrap as well.


Example usage in a Phoenix LiveView component:

defmodule WidgetExampleLive do
  use BulmaWidgets
  alias BulmaWidgets.DropdownComponent
  alias BulmaWidgets.TabsComponent
  use Phoenix.LiveView
  require Logger

  def mount(_params, _session, socket) do
    socket = socket |> assign(test_var: "some example value")
    {:ok, socket}

  def render(assigns) do
    <div phx-click="bulma-widgets-close-all" >
      <h1>LiveView is awesome!</h1>
      <section class="section">
        <h1 class="title"> Bulma Widget </h1>

        <%= live_component @socket, DropdownComponent,
              id: :dm_test1,
              items: ["Menu 1", "Menu 2"] %>

        <div class="box">
          <%= live_component @socket, TabsComponent,
                  id: :bw_tabs2,
                  items: ["Info 1", "Info 2"],
                  icons: %{"Info 1" => "fa fa-car"},
                  classes: 'is-centered is-toggle is-toggle-rounded' do %>
            <%= case @item do %>
              <%= "Info 1" -> %>
                <h1 class="title">First Tab</h1>

              <%= "Info 2" -> %>

                <h1 class="title">Second Tab</h1>
                <h2 class="subtitle"><%= @test_var %></h2>

                <%= live_component(@socket, DropdownComponent,
                      id: :dm_test2,
                      items: ["Menu 1", "Menu 2"]) %>

              <%= other -> %>

                <h1><%= other %></h1>

            <% end %>
          <% end %>

        .widgets-dropdown-width {
          width: 12em;

  def handle_widget(socket, {:update, BulmaWidgets.DropdownComponent}, id, updates) do
    Logger.warn("updating widget: DropdownComponent: #{inspect({id, updates})}")



Checkout Surface for a more full featured "component library".


If available in Hex, the package can be installed by adding bulma_widgets to your list of dependencies in mix.exs:

def deps do
    {:bulma_widgets, "~> 0.1.0"}

Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at

You can’t perform that action at this time.