View Source DaisyUIComponents (DaisyUIComponents v0.6.0)

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

def deps do
  [
    {:daisy_ui_components, "~> 0.6"}
  ]
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: [
    //...
    // comment the tailwind form to not conflict with DaisyUI
    // require("@tailwindcss/forms"),
    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
    # Translation
    use Gettext, backend: MyAppWeb.Gettext

    # HTML escaping functionality
    import Phoenix.HTML

    # Import DaisyUI components into your project
    use DaisyUIComponents

    # Comment your own CoreComponents to not conflict with the defaults of this library.
    # 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

Finally, in order to not conflict with some of the DaisyUI default styles, remove the bg-white class in your root.html.heex file.

## Change from this
<body class="bg-white">
## to this
<body>

Core Components

This library aims to integrate seamlessly with Phoenix generators. For this reason you don't need the components inside the CoreComponents after adding use DaisyUIComponents into your web file. All the components should be compatible, styled with DaisyUI.

If you encounter any compatibility issues, feel free to open an issue or submit a pull request, and I'll take a look.

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.

NPM setup

Since DaisyUI requires npm to install, it's also necessary to configure in your project the asset pipeline to use the npm commands.

In your mix.exs file, add the npm command in your assets setup:

"assets.setup": [
  "tailwind.install --if-missing",
- "esbuild.install --if-missing"
+ "esbuild.install --if-missing",
+ "cmd npm install --prefix assets"
],
"assets.deploy": [
    "tailwind my_project --minify",
    "esbuild my_project --minify",
+   "npm --prefix ./assets ci --progress=false --no-audit --loglevel=error",
    "phx.digest"
],

and if you are deploying the application with Docker, run the npm scripts there too:

# install build dependencies
-RUN apt-get update -y && apt-get install -y build-essential git \
+RUN apt-get update -y && apt-get install -y build-essential git npm \
    && apt-get clean && rm -f /var/lib/apt/lists/*_*

Components

List of available components.

Actions

ComponentStatusStorybook
Button
Dropdown
Modal
Swap
Theme Controller

Data Display

ComponentStatusStorybook
Accordion
Avatar
Badge
Card
Carousel
Chat bubble
Collapse
Countdown
Diff
Kbd
Stat
Table
Timeline

Navigation

ComponentStatusStorybook
Breadcrumbs
Bottom navigation
Link
Menu
Navbar
Pagination
Steps
Tabs

Feedback

ComponentStatusStorybook
Alert
Loading
Progress
Radial progress
Skeleton
Toast
Tooltip

Data Input

ComponentStatusStorybook
Checkbox
File input
Radio
Range
Rating
Select
Text Input
Textarea
Toggle

Layout

ComponentStatusStorybook
Artboard
Divider
Drawer
Footer
Hero
Indicator
Join
Mask
Stack

Mockup

ComponentStatusStorybook
Browser
Code
Phone
Window

Phoenix Core Components

ComponentStatusStorybook
Flash
Header
List
Simple Form
Input
Table

Roadmap

  • Implement all components
  • Document all components in Storybook
  • Create mix script to enable users to import the components of this library into their projects, sharing the same project namespace.