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

Most Liked

phcurado

phcurado

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 #2
LostKobrakai

LostKobrakai

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.

phcurado

phcurado

DaisyUI Components Version 0.8 Released :rocket:

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:

image

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.


Code example:

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

Fieldset Storybook

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}/>

Progress Storybook

Footer
And the last component of this release, the footer component.


Footer Storybook

Roadmap

  • Compatibility with DaisyUI V5 - Done :white_check_mark:
  • Implement more components and storybooks, the missing components can be seen on the Readme component’s section
  • Support for tailwind 4.0
  • Monitor the new phoenix release to avoid compatibility issues when it’s released a new version
  • Create mix script to enable users to import the components of this library into their projects, sharing the same project namespace.

Thanks everyone :pray:

olivermt

olivermt

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.

antfarm

antfarm

Meanwhile, here is the commit and the github issue:

Where Next?

Popular in Libraries Top

RobertDober
Earmark is a pure-Elixir Markdown converter. It is intended to be used as a library (just call Earmark.as_html), but can also be used as...
239 11851 134
New
tmbb
I’ve been working on two packages (not on hex.pm yet) to build admin interfaces for phoenix apps: bureaucrat - which contains a bunch ...
New
pkrawat1
Hey guyz We at @aviabird are working on a payment library in elixir/phoenix. We are targeting March 2018 to add 56 Gateways to it. Have...
New
nikokozak
Hello all, I’ve been working on Svonix - a library for quickly integrating Svelte components into Phoenix views. It’s a much-needed succ...
New
dbern
I’m excited to announce that TaxJar has developed and open-sourced DateTimeParser. We developed it because we found a need to parse user ...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 27727 240
New
alisinabh
Hey everyone i’ve developed a library for Jalaali calendar for elixir which supports converting Gregorian dates to Jalaali and vice vers...
New
Qqwy
While not as prevalent as in imperative languages, arrays (collections with efficient random element access) are still very useful in Eli...
New
bryanjos
Hi, I wanted share a small library we at Revelry Labs made for rendering react components from the server side. There are instructions fo...
New
Hal9000
Here is my first stab at this. README pasted below. https://github.com/Hal9000/elixir_random Comments and critiques are welcome. Th...
New

Other popular topics Top

dotdotdotPaul
Okay, I'm having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I'm sure I'...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: https://hexdocs.pm/ecto/Ecto.Schema.html#module-...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 49522 488
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers' Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
Nvim
Elixir appears to be a superior language to Python. I don’t see any advantage of Python over Elixir. Are there any?
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New

Sub Categories:

We're in Beta

About us Mission Statement