phcurado

phcurado

DaisyUIComponents - A Phoenix LiveView + DaisyUI library 🌼

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

Links

https://github.com/phcurado/daisy_ui_components

First 10 of 21 Posts Switch mode

phcurado

phcurado OP

New version released :rocket:
Now the welcome page have a theme switch and new components were added

welcomepage

Hero

The ideal component for your landing page

Storybook

Join

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>

Storybook

Indicator

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>

Storybook

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 :sunflower:

12
Post #1
Nefcairon

Nefcairon

When I look into the storybook → Table, then the first table has the headers wrong:

phcurado

phcurado OP

Good catch! Just pushed a fix, missing the ID on the table header

jonlunsford

jonlunsford

Very nice! I integrate DaisyUI into most of my projects. I will give to this try next time!

sirgallifrey

sirgallifrey

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

phcurado

phcurado OP

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.

typesend

typesend

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. :slight_smile:

phcurado

phcurado OP

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

zachdaniel

zachdaniel

Creator of Ash

Is this compatible w/ the new standalone mode?

i.e not requiring a build step?

phcurado

phcurado OP

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.

Where Next?

Trending in Announcing Top

bluzky
You may know https://ui.shadcn.com/, a UI component library for React. I really love it’s design style and components. I’ve built some co...
387 14960 120
New
JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
shahryarjb
The Chelekom project is a library of Phoenix and LiveView components generated via Mix tasks to fit developer needs seamlessly. One of i...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
wintermeyer
There are three potential reasons for members of this forum to have a look at https://vutuv.de You are tired or annoyed of LinkedIn. Yo...
New

Other Trending Topics Top

type1fool
I just stumbled on a newly redesigned elixir-lang.org. :tada: It looks like @Software_Mansion did the work, and I think it is generally a...
New
akoutmos
@hugobarauna and I (Alex Koutmos) have been hard at work on writing a book on Nerves that takes you from simply blinking LEDs to building...
New
juhalehtonen
There has been a thread to discuss the Stack Overflow Developer Survey on this forum every year since 2018, so here’s yet another one for...
New
bjorng
We want to introduce a new native datatype to Erlang: native records. Although replacing all tuple records with native records is not our...
New
spammy
I’m looking to build a personal workflow to quickly deploy web applications written in elixir/phoenix, for local consumption (ie not on t...
New
alexslade
Fly’s CEO posted this recently - Turn And Face The Strange · The Fly Blog It says that Fly is going all-in on sprites, which is a worry ...
New

We're in Beta

About us Mission Statement