{ JTR }

DaisyUI Now in Phoenix 1.8


Phoenix Elixir DaisyUI Tailwind
ui frontend

DaisyUI Now in Phoenix 1.8

Phoenix 1.8 now includes DaisyUI support. I’ve actually been using DaisyUI already and previously added it manually to my apps—so it’s great to see it officially included in 1.8. I’m using it in my trading card collection app tcg247.com. DaisyUI is a Tailwind CSS plugin that provides pre-built components like cards, modals, and drawers.

What is DaisyUI?

DaisyUI adds component classes to Tailwind CSS, so instead of writing dozens of utility classes, you can use semantic class names like card, btn, drawer, and hero.

Components from tcg247.com

Here are some DaisyUI components I’m using in the app.

DaisyUI Navbar and Hero Banner

Cards

DaisyUI Card Component

Drawer Navigation

DaisyUI Drawer Navigation

Toast Notifications

DaisyUI Toast Notification

Progress Bar

DaisyUI Progress Bar

Steps

DaisyUI Steps

DaisyUI Modal

Mobile Responsive

DaisyUI Mobile Responsive Layout

Why DaisyUI?

  • Fast Development: Pre-built components mean less custom CSS
  • Consistent Design: All components follow the same design system
  • Tailwind Compatible: Works seamlessly with Tailwind utilities
  • Customizable: Easy to override with custom themes
  • Responsive: Mobile-first components out of the box

Wrap Up

Phoenix 1.8 including DaisyUI is a nice addition. If you’re building a Phoenix app, check out the DaisyUI docs for more components.