DaisyUIComponents (DaisyUIComponents v0.7.5)
View SourceReference this repository on your mix.exs
file to start using.
def deps do
[
{:daisy_ui_components, "~> 0.7"}
]
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
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
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
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.
## 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.
π¦ NPM setup
Since DaisyUI requires npm
to install, it's also necessary to configure in your project the asset pipeline to use the npm commands.
In your mix.exs
file, add the npm command in your assets setup:
"assets.setup": [
"tailwind.install --if-missing",
- "esbuild.install --if-missing"
+ "esbuild.install --if-missing",
+ "cmd npm install --prefix assets"
]
and if you are deploying the application with Docker
, run the npm scripts there too:
# install build dependencies
-RUN apt-get update -y && apt-get install -y build-essential git \
+RUN apt-get update -y && apt-get install -y build-essential git npm \
&& apt-get clean && rm -f /var/lib/apt/lists/*_*
# ...
RUN mix deps.compile
# build assets
+COPY assets/package.json assets/package-lock.json ./assets/
+RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error
β‘οΈ Components
List of available components.
Actions
Component | Status | Storybook |
---|---|---|
Button | β | β |
Dropdown | β | β |
Modal | β | β |
Swap | β | β |
Theme Controller | β | β |
Data Display
Component | Status | Storybook |
---|---|---|
Accordion | β | β |
Avatar | β | β |
Badge | β | β |
Card | β | β |
Carousel | β | β |
Chat bubble | β | β |
Collapse | β | β |
Countdown | β | β |
Diff | β | β |
Kbd | β | β |
Stat | β | β |
Table | β | β |
Timeline | β | β |
Navigation
Component | Status | Storybook |
---|---|---|
Breadcrumbs | β | β |
Bottom navigation | β | β |
Link | β | β |
Menu | β | β |
Navbar | β | β |
Pagination | β | β |
Steps | β | β |
Tabs | β | β |
Feedback
Component | Status | Storybook |
---|---|---|
Alert | β | β |
Loading | β | β |
Progress | β | β |
Radial progress | β | β |
Skeleton | β | β |
Toast | β | β |
Tooltip | β | β |
Data Input
Component | Status | Storybook |
---|---|---|
Checkbox | β | β |
File input | β | β |
Radio | β | β |
Range | β | β |
Rating | β | β |
Select | β | β |
Text Input | β | β |
Textarea | β | β |
Toggle | β | β |
Layout
Component | Status | Storybook |
---|---|---|
Artboard | β | β |
Divider | β | β |
Drawer | β | β |
Footer | β | β |
Hero | β | β |
Indicator | β | β |
Join | β | β |
Mask | β | β |
Stack | β | β |
Mockup
Component | Status | Storybook |
---|---|---|
Browser | β | β |
Code | β | β |
Phone | β | β |
Window | β | β |
Phoenix Core Components
Component | Status | Storybook |
---|---|---|
Flash | β | β |
Header | β | β |
List | β | β |
Simple Form | β | β |
Input | β | β |
Table | β | β |
πΊοΈ Roadmap
- Implement all components
- Document all components in Storybook
- Create
mix
script to enable users to import the components of this library into their projects, sharing the same project namespace.
Summary
Functions
Used for functional or live components