FlowbitePhoenix (FlowbitePhoenix v0.1.2)

View Source

FlowbitePhoenix - A comprehensive Phoenix LiveView component library using Flowbite CSS framework.

FlowbitePhoenix provides a complete set of UI components styled with Flowbite, a utility-first CSS framework built on Tailwind CSS. It offers ready-to-use components for forms, layout, feedback, and navigation with consistent styling and theming support.

Important: JavaScript Setup

FlowbitePhoenix requires the Phoenix LiveView compatible version of Flowbite JS to function properly. Always use flowbite.phoenix.js instead of the regular flowbite.js to ensure interactive components work correctly with LiveView page transitions.

Installation

Add flowbite_phoenix to your list of dependencies in mix.exs:

def deps do
  [
    {:flowbite_phoenix, "~> 0.1.1"}
  ]
end

Then fetch the dependencies and run the installation task:

mix deps.get
mix flowbite_phoenix.install

Usage

Import the component modules you need in your templates or components:

import FlowbitePhoenix.Components.Forms
import FlowbitePhoenix.Components.Layout
import FlowbitePhoenix.Components.Feedback
import FlowbitePhoenix.Components.Navigation

Or import all components at once:

import FlowbitePhoenix.Components

Configuration

You can configure FlowbitePhoenix in your config.exs:

config :flowbite_phoenix,
  gettext_backend: MyAppWeb.Gettext,
  theme: %{
    primary_color: "blue",
    # Additional theme customizations...
  }

Components

FlowbitePhoenix provides the following component categories:

  • Forms: input/1, button/1, simple_form/1, toggle/1, label/1, error/1
  • Layout: modal/1, table/1, card/1, card_header/1, header/1, icon/1
  • Feedback: flash/1, flash_group/1, alert/1, badge/1, spinner/1
  • Navigation: dropdown/1, back/1, breadcrumb/1, pagination/1

All components follow Flowbite design patterns and support dark mode.

Summary

Functions

Convenience function for gettext translation.

Translates an error message using gettext.

Translates the errors for a field from a keyword list of errors.

Returns the version of FlowbitePhoenix.

Functions

gettext(message, default \\ nil)

Convenience function for gettext translation.

translate_error(msg)

Translates an error message using gettext.

This function provides a unified way to translate error messages throughout the FlowbitePhoenix components, with fallback support when Gettext is not available.

translate_errors(errors, field)

Translates the errors for a field from a keyword list of errors.

version()

Returns the version of FlowbitePhoenix.