DaisyUI Components

This project brings Daisy UI components into your Phoenix LiveView project.

This project is still experimental, expect breaking changes in future.

Installation

Reference this repository on your mix.exs file to start using.

def deps do
  [
    {:daisy_ui_components, "~> 0.2"}
  ]
end

Add through npm the daisy UI package inside your phoenix application:

cd assets
npm i -D daisyui@latest

On tailwind.config.js include Live DaisyUI Components under the content list and reference under plugins

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

Add error translation function to your app's config.exs file. This function is used to translate ecto changeset errors

config :daisy_ui_components, translate_function: &MyAppWeb.CoreComponents.translate_error/1

And now this library is ready. To have the components available under liveview, import the components on the web folder

defp html_helpers do
  quote do
    use DaisyUIComponents
    # HTML escaping functionality
    import Phoenix.HTML
    # Core UI components from Live DaisyUI
    import DaisyUIComponents.CoreComponents

    # import YourProjectWeb.CoreComponents
    # Importing CoreComponents from your project is no longer necessary since
    # DaisyUIComponents.CoreComponents offers a drop in replacement
    # If you still want to use your own core components, remember to delete the default components generated from phoenix in this file
    # ...
  end
end

Check the Core Components implementation for replacing the default phoenix core components. The components have the same logic from Phoenix default generator, but now using DaisyUI styles.

There are some small differences on this project's Core components comparing to the default generated by Phoenix. For the form component, the input was named as <.form_input /> to not conflict with the default <.input /> html component made for daisyUI. This difference is fully shown in the form component section in our storybook site

Liveview 1.0

This project is fully compatible with the Liveview 1.0 🔥. If you are using a previous Liveview version, check the migration guide.

Components

List of available components.

• Alert ✅
• Artboard ❌
• Avatar ✅
• Badge ✅
• Bottom navigation ❌
• Breadcrumbs ✅
• Button group ✅
• Button ✅
• Card ✅
• Carousel ❌
• Chat bubble ❌
• Checkbox ✅
• Collapse ❌
• Countdown ❌
• Divider ❌
• Drawer ❌
• Dropdown ❌
• File input ❌
• Footer ❌
• Join ✅
• Hero ❌
• Indicator ❌
• Input group ❌
• Text Input ✅
• Kbd ❌
• Link ❌
• Loading ✅
• Mask ❌
• Menu ❌
• Code mockup ❌
• Phone mockup ❌
• Window mockup ❌
• Modal ✅
• Navbar ✅
• Pagination ✅
• Progress ❌
• Radial progress ❌
• Radio ❌
• Range slider ❌
• Rating ❌
• Select ✅
• Stack ❌
• Stat ✅
• Steps ❌
• Swap ❌
• Tabs ❌
• Table ✅
• Textarea ✅
• Toast ❌
• Toggle ✅
• Tooltip ✅

✅: Implemented ❌: To be implemented