Daisy Components

Daisy UI components built with Phoenix LiveView.

Installation

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

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

Update Tailwind CSS to include Daisy Components styles by adding the following line to your app.css:

@plugin "daisyui";
@source "../../deps/daisy_components/**/*.ex";

If you are using tailwind.config.js, make sure to include the Daisy Components path:

module.exports = {
  content: [
    //...
    "../../deps/daisy_components/**/*.ex" // <- reference DaisyComponents as content path
  ],
  //...
  plugins: [
    //...
    require("daisyui")  <- // add DaisyUI plugin
    //...
  ]
}

Add DaisyComponents to your helpers to access in your templates:

defp html_helpers do
  quote do
    #...
    import DaisyComponents
  end
end

Include it in your CoreComponents or equivalent module:

defmodule MyAppWeb.CoreComponents do
  use Phoenix.Component
  import DaisyComponents
  #...
end

Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/daisy_components.

Storybook

Storybook is hosted in a standalone Phoenix app under storybook_app/ to avoid impacting the component library build.

From the repo root:

cd storybook_app
mix deps.get
mix assets.build
mix phx.server

Then open http://localhost:4000/. Story files live in /storybook at the repo root and are loaded by storybook_app. Add new component stories under storybook/*.story.exs and update indexes as needed.

TODO

[ ] Add all components from Daisy UI.