Phoenix_ui screenshot

Phoenix_ui

Author Avatar Theme by Keatz55
Updated: 13 Dec 2024
107 Stars

Beautifully designed components that you can copy and paste into your Phoenix Framework apps. Made with Tailwind CSS. Open source.

Overview:

Phoenix UI is a complimentary UI library specifically designed for the Phoenix Framework and Phoenix LiveView. It provides a collection of user interface components that can be easily integrated into Phoenix projects. In order to use Phoenix UI, you need to have Phoenix 1.6 installed in your project.

Features:

  • Tailwind CSS Integration: Phoenix UI works seamlessly with Tailwind CSS, allowing you to easily set up and configure Tailwind in your Phoenix project.
  • Hex Package: Phoenix UI is available as a package on Hex, making it easy to install and manage as a dependency in your project.
  • Extensive Documentation: The package comes with comprehensive documentation available at https://hexdocs.pm/phoenix_ui, providing clear instructions and examples on how to use the various components.

Installation:

To install Phoenix UI, follow these steps:

  1. Ensure that your Phoenix project is using Phoenix 1.6 or higher.
  2. Set up Tailwind CSS in your Phoenix project by referring to the official guide.
  3. Add the Phoenix UI package as a dependency in your project’s mix.exs file by including phoenix_ui in the list of dependencies.
    defp deps do
      [
        {:phoenix_ui, "~> x.x.x"}
      ]
    end
    
    Replace x.x.x with the desired version of Phoenix UI.
  4. After adding the dependency, run mix deps.get to fetch the package.
  5. Once the package is installed, you can import Phoenix UI components in your Phoenix application’s view_helpers function. Here’s an example:
    def view_helpers do
      quote do
        ...
        import Phoenix.UI.Components
        ...
      end
    end
    
    These components can now be used in your Phoenix LiveView templates.

Summary:

Phoenix UI is a valuable UI library that enhances the development experience of Phoenix Framework and Phoenix LiveView projects. With its Tailwind CSS integration, easy installation process, and well-documented components, it provides developers with a convenient way to create beautiful and responsive user interfaces.