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

tmbb
I’ve decided to create this topic to discuss optimization possibilities for something like Phoenix LiveView. I’ve created this topic unde...
New
markmark206
simple_feature_flags is a tiny package that lets you turn features on or off based on which environment (e.g. localhost, staging, product...
New
Qqwy
TypeCheck: Fast and flexible runtime type-checking for your Elixir projects. Core ideas Type- and function specifications are const...
336 13801 100
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
praveenperera
FastRSS Parse RSS feeds very quickly: This is rust NIF built using rustler Uses the RSS rust crate to do the actual RSS parsing Speed...
New
michalmuskala
Another small library today. PersistentEts Hex: persistent_ets | Hex GitHub: GitHub - michalmuskala/persistent_ets Ets table backed by...
New
benlime
LiveMotion enables high performance animations declared on the server and run on the client. As a follow up to my previous thread A libr...
New
woylie
Flop is an Elixir library that applies filtering, ordering and pagination parameters to your Ecto queries. offset-based pagination with...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 42633 214
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

Other popular topics Top

TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
273 38985 115
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1140 51847 244
New
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
Tee
can someone please explain to me how Enum.reduce works with maps
New
_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
mgjohns61585
Could someone help me? I'm making my first elixir program, number guessing game. I can't figure out how to convert the user's guess from ...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New

Sub Categories:

We're in Beta

About us Mission Statement