🌻 DaisyUI Components

📚 Storybook

---

This project brings DaisyUI components into your Phoenix project.

📦 Installation

Installing it with mix archive installer

mix archive.install hex daisy_ui_installer

In the Phoenix project folder

mix daisy

Alternative, you can just install a single component

mix daisy badge input

NOTE: This will install the components and it's dependencies.

Installing as a dependency

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

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

DaisyUI Assets

Phoenix 1.8+ uses tailwind and daisyui configured out of the box. If your project is using an older version of Phoenix, you can install the daisyui package manually. Follow the official DaisyUI installation guide to install the package.

Configuration

In order to use the translations that comes with phoenix, it's recommended to set the translate_function in your config.exs file.

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

And to finalize, add under the app.css file the following line to import this library tailwind styles:

@source "../../deps/daisy_ui_components";

🧩 Usage

To use the components in your project, you need to import the DaisyUIComponents module in your web file, typically lib/my_app_web.ex.

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, core_components: false
    import YourProjectWeb.CoreComponents
  end
end

This will make all the components available in your templates with the exception of the phoenix core_components.ex and layouts.ex components. If you want to use all DaisyUIComponents, set core_components: true and remove the import for the phoenix CoreComponents.

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, core_components: true
-   import YourProjectWeb.CoreComponents
  end
end

You may also find component conflicts on the layout.ex file, you will need to comment the flash_group/1 component there too.

⭐ 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.

⚡️ Components

List of available components.

Actions

Component	Status	Storybook
Button	✅	✅
Dropdown	✅	✅
Modal	✅	✅
Swap	✅	✅
Theme Controller	❌	❌

Data Display

Component	Status	Storybook
Accordion	✅	❌
Avatar	✅	✅
Badge	✅	✅
Card	✅	✅
Carousel	❌	❌
Chat bubble	❌	❌
Collapse	✅	❌
Countdown	❌	❌
Diff	❌	❌
Kbd	❌	❌
Stat	✅	✅
Table	✅	✅
Timeline	❌	❌

Navigation

Component	Status	Storybook
Breadcrumbs	✅	✅
Dock	❌	❌
Link	❌	❌
Menu	✅	✅
Navbar	✅	✅
Pagination	✅	✅
Steps	✅	❌
Tabs	✅	❌

Feedback

Component	Status	Storybook
Alert	✅	✅
Loading	✅	✅
Progress	✅	✅
Radial progress	❌	❌
Skeleton	❌	❌
Toast	❌	❌
Tooltip	✅	✅

Data Input

Component	Status	Storybook
Checkbox	✅	✅
Fieldset	✅	✅
File input	❌	❌
Label	✅	✅
Radio	✅	✅
Range	✅	✅
Rating	❌	❌
Select	✅	✅
Text Input	✅	✅
Textarea	✅	✅
Toggle	✅	✅
Validator	✅	✅

Layout

Component	Status	Storybook
Artboard	❌	❌
Divider	❌	❌
Drawer	✅	✅
Footer	✅	✅
Hero	✅	✅
Indicator	✅	✅
Join	✅	✅
Mask	❌	❌
Stack	❌	❌

Mockup

Component	Status	Storybook
Browser	❌	❌
Code	❌	❌
Phone	❌	❌
Window	❌	❌

Phoenix Core Components

Component	Status	Storybook
Flash	✅	✅
Header	✅	✅
List	✅	✅
Simple Form	✅	✅
Input	✅	✅
Table	✅	✅

🤩 Contributors