DaisyUIComponents is a library that seamlessly integrates the amazing DaisyUI component library into your Phoenix LiveView project.
It replaces Phoenix’s default CoreComponents with pre-styled DaisyUI components, making it easier to switch your application’s UI.
It also provides 30+ DaisyUI components built in using the Phoenix component engine.
Storybook: Phoenix + DaisyUI - Welcome
New version released 
Now the welcome page have a theme switch and new components were added
The ideal component for your landing page
Join any component with the join component and utility classes
<.join direction="horizontal">
<.button class="join-item">Button</.button>
<.button class="join-item">Button</.button>
<.button class="join-item">Button</.button>
</.join>
Component to place content on the corner of another element
<.indicator >
<:badge color="success">hi</:badge>
<div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</.indicator>
More components will be added soon, with plans to ensure compatibility with the upcoming DaisyUI 5.0, which is set to launch in two weeks 
Good catch! Just pushed a fix, missing the ID on the table header
Very nice! I integrate DaisyUI into most of my projects. I will give to this try next time!
Nice job! I was looking into using DaisyUI so I appreciate the work. Are you looking for some help implementing the components? If so let me know
Thanks, Adilson, for checking it out! Any help is welcome and I would love to have contributors on the project. If there is a specific component you would like to see, let me know, I can prioritize it right away.
How much effort is it to upgrade to DaisyUI 5? Looks like you’ve already started but I’d be happy to help complete that if it wouldn’t get in your way. 
thank you @typesend, I was planning to finish on 23th of this month, when I come back from traveling. If you need it sooner I can definitively take a look on your PR.
Overall the upgrade is simple, only exception is daisyUI forms with fieldset and labels, since the new classes they made for forms are not backwards compatible, kinda breaks the form components I built. If you want to give a try I can check it out
Is this compatible w/ the new standalone mode?
i.e not requiring a build step?
Hey @zachdaniel,
Since this library doesn’t handle the assets, it should work with the tailwind standalone or using directly the DaisyUI CDN.
The assets are handled by the application (that is including this lib) build process. On the readme I added the conventional way of adding daisyUI assets in a phoenix project, which is through npm but anything can work - e.g using bun for example.
DaisyUI Components Version 0.8 Released
This new version is now compatible with the new DaisyUI V5, thank you @typesend for starting this work on the repo.
The new UI can be seen on the storybook.
On top of that, new components were added, here is a quick display of them:
Label
The label component was introduced in the new DaisyUI version, we can add labels to inputs:
Code example:
<.label text="https://" type="input">
<input type="text" placeholder="URL" />
</.label>
We can have labels before or after the input. We also have floating labels, take a look on the Label Storybook for all options
Fieldset
Probably the most important component of this release. The fieldset is useful to group several controls and is now used on all form inputs to group label, input and errors in a form.
<.fieldset class="w-xs bg-base-200 border border-base-300 p-4 rounded-box">
<.fieldset_legend>Login</.fieldset_legend>
<.fieldset_label>Email</.fieldset_label>
<.input type="email" placeholder="Email" />
<.fieldset_label>Password</.fieldset_label>
<.input type="password" placeholder="Password" />
<.button class="btn btn-primary mt-4">Login</.button>
</.fieldset>
Progress
Maybe not the most popular component but it’s a nice one to have, it’s really easy to add it on your site:
Code example:
<.progress color="primary" max={100} value={40}/>
Footer
And the last component of this release, the footer component.
Roadmap
mix script to enable users to import the components of this library into their projects, sharing the same project namespace.Thanks everyone 
Is there any plans to add more reactivity on top of the existing daisy components? It is a glaring hole atm in Daisy that almost nothing is mobile first (try looking at the tables from a phone), but this seems very achievable to patch over in the library. Adding things like attrs for the col slots for how it collapses in lower media queries etc.
hey @olivermt,
There are plans to improve the components to have better ergonomics compared to the default daisyui styles. I’m implementing it little by little as I’m still focusing on having a bigger component coverage and storybook with all the examples.
For the table example, I believe the storybook is making the table a bit weird on mobile but you can check the same table on the default daisyUI docs: Tailwind Table Component — Tailwind CSS Components ( version 5 update is here ) which should look a bit better.
As for having collapsible columns, this should already be possible if using the table without the col slots. Using table with col slots - instead of using th td - is an option provided by this lib to have compatibility with the current phoenix generators. Since each element of the table can accept classes, you can choose to or hide/show a column based on a media query. For improving the table with slots, I can add a class attribute there so you can pass any class per column and I will also add on pipeline here to offer a collapsible option, great suggestion.
Splendid! And it is meant as critique of daisy itself, NOT of your package just to reiterate that.
I pay for tailwindui and everything there is staunchly mobile first, so it was a bit jarring to have to think reactively again when looking at Daisy again after the phoenix announcement to default to daisy
Where/what was this announcement of defaulting to DaisyUI?
To be honest I don’t know. Everyone on elixir slack talked about it so confidently I didn’t bother doing a fact check 
Daily UI will become part of the next phoenix release, the change has been merged, but annoucements will likely only be had once the release is ready.
© Copyright Elixir Forum | Terms | Privacy & Cookies
