Packages

daisy_ui_components

0.5.0
0.9.7 0.9.6 0.9.5 0.9.4 0.9.3 0.9.2 0.9.1 0.9.0 0.8.7 0.8.7-rc.0 0.8.6 0.8.5 0.8.4 0.8.3 0.8.2 0.8.1 0.8.0 0.7.6 0.7.5 0.7.4 0.7.3 0.7.2 0.7.1 0.7.0 0.6.0 0.5.0 0.4.3 0.4.2 0.4.1 0.4.0 0.3.0 0.2.1 0.2.0 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

DaisyUI component library for LiveView

HexDocs

Current section

Files

Jump to
Readme
41 Versions
1 Dependency
Dependants
Files
Activity
daisy_ui_components README.md
Raw

README.md 

# DaisyUI Components



[![CI](https://github.com/phcurado/daisy_ui_components/actions/workflows/ci.yml/badge.svg)](https://github.com/phcurado/daisy_ui_components/actions/workflows/ci.yml)

[![Coverage Status](https://coveralls.io/repos/github/phcurado/daisy_ui_components/badge.svg?branch=main)](https://coveralls.io/github/phcurado/daisy_ui_components?branch=main)

[![Hex.pm](https://img.shields.io/hexpm/v/daisy_ui_components)](https://hex.pm/packages/daisy_ui_components)

[![HexDocs.pm](https://img.shields.io/badge/Docs-HexDocs-blue)](https://hexdocs.pm/daisy_ui_components)

[![License](https://img.shields.io/hexpm/l/daisy_ui_components.svg)](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