# DaisyUI Components
[](https://github.com/phcurado/daisy_ui_components/actions/workflows/ci.yml)
[](https://coveralls.io/github/phcurado/daisy_ui_components?branch=main)
[](https://hex.pm/packages/daisy_ui_components)
[](https://hexdocs.pm/daisy_ui_components)
[](https://hex.pm/packages/daisy_ui_components)
---
This project brings [Daisy UI](https://daisyui.com/) components into your Phoenix LiveView project.
This project is still experimental, expect breaking changes in future.
## Installation
<!-- MDOC -->
Reference this repository on your `mix.exs` file to start using.
```elixir
def deps do
[
{:daisy_ui_components, "~> 0.5"}
]
end
```
Add through `npm` the daisy UI package inside your phoenix application:
```
cd assets
npm i -D daisyui@latest
```
On `tailwind.config.js` include Live DaisyUI Components under the content list and reference under plugins
```javascript
module.exports = {
content: [
//...
"../deps/daisy_ui_components/**/*.*ex" // <- reference DaisyUIComponents as content path
],
//...
plugins: [
//...
// comment the tailwind form to not conflict with DaisyUI
// require("@tailwindcss/forms"),
require("daisyui") <- // add daisyUI plugin
//...
]
}
```
Add error translation function to your app's config.exs file. This function is used to translate ecto changeset errors
```elixir
config :daisy_ui_components, translate_function: &MyAppWeb.CoreComponents.translate_error/1
```
And now this library is ready. To have the components available under liveview, import the components on the web folder
```elixir
defp html_helpers do
quote do
# Translation
use Gettext, backend: MyAppWeb.Gettext
# HTML escaping functionality
import Phoenix.HTML
# Import DaisyUI components into your project
use DaisyUIComponents
# Comment your own CoreComponents to not conflict with the defaults of this library.
# import YourProjectWeb.CoreComponents
# Importing CoreComponents from your project is no longer necessary since
# DaisyUIComponents.CoreComponents offers a drop in replacement
# If you still want to use your own core components, remember to delete the default components generated from phoenix in this file
# ...
end
end
```
Finally, in order to not conflict with some of the DaisyUI default styles, remove the `bg-white` class in your `root.html.heex` file.
```heex
## Change from this
<body class="bg-white">
## to this
<body>
```
## Core Components
This library aims to integrate seamlessly with Phoenix generators. For this reason you don't need the components inside the `CoreComponents` after adding `use DaisyUIComponents` into your web file.
All the components should be compatible, styled with DaisyUI.
If you encounter any compatibility issues, feel free to open an `issue` or submit a `pull request`, and I'll take a look.
## Liveview 1.0
This project is fully compatible with the Liveview 1.0 🔥. If you are using a previous Liveview version, check the [migration guide](https://github.com/phoenixframework/phoenix_live_view/blob/main/CHANGELOG.md#backwards-incompatible-changes-for-10).
## Components
List of available components.
| Component | Status |
| ------------- | ------------- |
| [Alert](https://daisyui.com/components/alert) | ✅ |
| [Artboard](https://daisyui.com/components/artboard) |❌ |
| [Avatar](https://daisyui.com/components/avatar) | ✅ |
| [Badge](https://daisyui.com/components/badge) | ✅ |
| [Bottom navigation](https://daisyui.com/components/botton-navigation) | ❌ |
| [Breadcrumbs](https://daisyui.com/components/breadcrumbs) | ✅ |
| [Button](https://daisyui.com/components/button) | ✅ |
| [Card](https://daisyui.com/components/card) | ✅ |
| [Carousel](https://daisyui.com/components/carousel) | ❌ |
| [Chat bubble](https://daisyui.com/components/chat) | ❌ |
| [Checkbox](https://daisyui.com/components/checkbox) | ✅ |
| [Collapse](https://daisyui.com/components/collapse) | ❌ |
| [Countdown](https://daisyui.com/components/countdown) | ❌ |
| [Divider](https://daisyui.com/components/divider) | ❌ |
| [Drawer](https://daisyui.com/components/drawer) | ❌ |
| [Dropdown](https://daisyui.com/components/dropdown) | ❌ |
| [File input](https://daisyui.com/components/file-input) | ❌ |
| [Footer](https://daisyui.com/components/footer) | ❌ |
| [Join](https://daisyui.com/components/join) | ✅ |
| [Hero](https://daisyui.com/components/hero) | ❌ |
| [Indicator](https://daisyui.com/components/indicator) | ❌ |
| [Input group](https://daisyui.com/components/input-group) | ❌ |
| [Text Input](https://daisyui.com/components/input) | ✅ |
| [Kbd](https://daisyui.com/components/kbd) | ❌ |
| [Link](https://daisyui.com/components/link) | ❌ |
| [Loading](https://daisyui.com/components/loading/) | ✅ |
| [Mask](https://daisyui.com/components/mask) | ❌ |
| [Menu](https://daisyui.com/components/menu) | ❌ |
| [Code mockup](https://daisyui.com/components/mockup-code) | ❌ |
| [Phone mockup](https://daisyui.com/components/mockup-phone) | ❌ |
| [Window mockup](https://daisyui.com/components/mockup-window) | ❌ |
| [Modal](https://daisyui.com/components/modal) | ✅ |
| [Navbar](https://daisyui.com/components/navbar) | ✅ |
| [Pagination](https://daisyui.com/components/pagination) | ✅ |
| [Progress](https://daisyui.com/components/progress) | ❌ |
| [Radial progress](https://daisyui.com/components/radial-progress) | ❌ |
| [Radio](https://daisyui.com/components/radio) | ❌ |
| [Range slider](https://daisyui.com/components/range) | ✅ |
| [Rating](https://daisyui.com/components/rating) | ❌ |
| [Select](https://daisyui.com/components/select) | ✅ |
| [Stack](https://daisyui.com/components/stack) | ❌ |
| [Stat](https://daisyui.com/components/stat) | ✅ |
| [Steps](https://daisyui.com/components/steps) | ❌ |
| [Swap](https://daisyui.com/components/swap) |✅
| [Tabs](https://daisyui.com/components/tab) | ❌ |
| [Table](https://daisyui.com/components/table) | ✅ |
| [Textarea](https://daisyui.com/components/textarea) | ✅ |
| [Toast](https://daisyui.com/components/toast) | ❌ |
| [Toggle](https://daisyui.com/components/toggle) | ✅ |
| [Tooltip](https://daisyui.com/components/tooltip) | ✅ |
✅: Implementd
❌: To be implemened
