Daisy Components

Daisy UI components built with Phoenix LiveView.

Supported Components

The following components from DaisyUI are supported:

• alert (<.alert>)
• avatar (<.avatar>)
• avatar_group (<.avatar_group>)
• badge (<.badge>)
• button (<.button>)
• card (<.card>)
• checkbox (<.checkbox>)
• collapse (<.collapse>)
• countdown (<.countdown>)
• divider (<.divider>)
• dock (<.dock>)
• dock_button (<.dock_button>)
• drawer (<.drawer>)
• dropdown (<.dropdown>)
• fieldset (<.fieldset>)
• hero (<.hero>)
• hover_3d (<.hover_3d>)
• input (<.input>)
• label (<.label>)
• loading (<.loading>)
• menu (<.menu>)
• menu_item (<.menu_item>)
• modal (<.modal>)
• progress (<.progress>)
• radio (<.radio>)
• range (<.range>)
• select (<.select>)
• stat (<.stat>)
• stats (<.stats>)
• swap (<.swap>)
• tab_item (<.tab_item>)
• tabs (<.tabs>)
• textarea (<.textarea>)
• toast (<.toast>)
• toggle (<.toggle>)
• tooltip (<.tooltip>)

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.2"}
  ]
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.