Livestrap

Bootstrap 5 components for Phoenix LiveView.

All components are prefixed with bs_ to avoid naming conflicts with Phoenix builtins or your own components.

Installation

Add livestrap to your dependencies in mix.exs:

def deps do
  [
    {:livestrap, "~> 0.1.0"}
  ]
end

Setup

Add use Livestrap to your app's HTML helpers so all components are available in your templates:

defmodule MyAppWeb do
  def html do
    quote do
      use Phoenix.Component
      use Livestrap
      # ...
    end
  end
end

Or import individual component modules where needed:

import Livestrap.Components.Button
import Livestrap.Components.Table

Make sure Bootstrap 5 CSS and JS are loaded in your layout (via CDN or your asset pipeline):

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Components

Button

<.bs_button variant="primary">Click me</.bs_button>
<.bs_button variant="danger" outline>Delete</.bs_button>
<.bs_button variant="success" size="lg" type="submit">Save</.bs_button>

Attrs: variant, outline, size (sm/lg), type, disabled, active

Alert

<.bs_alert variant="success">Saved successfully!</.bs_alert>
<.bs_alert variant="warning" dismissible>Watch out!</.bs_alert>
<.bs_alert variant="info">
  <:heading>Heads up!</:heading>
  Here is some additional info.
</.bs_alert>

Attrs: variant, dismissible | Slots: inner_block, heading

Badge

<.bs_badge variant="primary">New</.bs_badge>
<.bs_badge variant="danger" pill>99+</.bs_badge>

Attrs: variant, pill

Spinner

<.bs_spinner />
<.bs_spinner type="grow" variant="success" />
<.bs_spinner size="sm" label="Please wait..." />

Attrs: type (border/grow), variant, size (sm), label

Progress

<.bs_progress value={75} />
<.bs_progress value={60} variant="success" striped animated label="60%" />

Attrs: value, min, max, label, variant, striped, animated

Breadcrumb

<.bs_breadcrumb>
  <:item href="/">Home</:item>
  <:item href="/users">Users</:item>
  <:item active>Profile</:item>
</.bs_breadcrumb>

Attrs: label, divider | Slot: item (attrs: href, active)

Pagination

<.bs_pagination>
  <:item href="#" disabled>Previous</:item>
  <:item href="/page/1">1</:item>
  <:item href="/page/2" active>2</:item>
  <:item href="/page/3">3</:item>
  <:item href="#">Next</:item>
</.bs_pagination>

Attrs: label, size (sm/lg), align (center/end) | Slot: item (attrs: href, active, disabled)

Card

<.bs_card img_top="/photo.jpg" img_alt="A photo">
  <:header>Featured</:header>
  <:body title="Card title" subtitle="Subtitle">
    Some content here.
  </:body>
  <:footer>2 days ago</:footer>
</.bs_card>

Attrs: img_top, img_bottom, img_alt | Slots: header, body (attrs: title, subtitle), footer, inner_block

Accordion

<.bs_accordion id="faq">
  <:item heading="Question 1" open>Answer 1</:item>
  <:item heading="Question 2">Answer 2</:item>
</.bs_accordion>

Attrs: id, flush, always_open | Slot: item (attrs: heading, open)

Modal

<.bs_modal id="confirm" title="Are you sure?" centered>
  This action cannot be undone.
  <:footer>
    <.bs_button variant="secondary" data-bs-dismiss="modal">Cancel</.bs_button>
    <.bs_button variant="danger">Delete</.bs_button>
  </:footer>
</.bs_modal>

Attrs: id, title, size (sm/lg/xl), centered, scrollable, static_backdrop, fullscreen | Slots: inner_block, footer

Table

<.bs_table id="users" rows={@users} striped hover>
  <:col :let={user} label="ID">{user.id}</:col>
  <:col :let={user} label="Name">{user.name}</:col>
  <:action :let={user}>
    <a href={"/users/#{user.id}/edit"}>Edit</a>
  </:action>
</.bs_table>

Attrs: id, rows, row_id, row_click, row_item, variant, striped, striped_columns, hover, bordered, borderless, small, responsive, caption_top | Slots: col (attr: label), action

Supports Phoenix LiveView streams via phx-update="stream".

Global Attributes

All components accept arbitrary HTML attributes via Phoenix's :global pattern:

<.bs_button variant="primary" phx-click="save" class="mt-3">Save</.bs_button>
<.bs_alert variant="info" id="notice" data-testid="alert">Info</.bs_alert>

Development

Start the live_capture preview server:

iex -S mix

Visit http://localhost:4002 to browse all components with their variations.

License

MIT

Background

This code was generated using an LLM.