diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 2e572f7e37e..4dd44a56405 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -39,113 +39,62 @@ daisyUI welcomes contributions from anyone willing to help 🤝
### To build the daisyUI node package on local:
1. [[Fork](https://github.com/saadeghi/daisyui/fork) and] clone the repo on local
-1. Install package dependencies:
- ```
- npm install
- ```
-1. Build the package:
- ```
- npm run build
- ```
-1. Now you can import daisyUI to your `tailwind.config.js`:
- ```js
- module.exports = {
- plugins: [require("/path/to/src/directory")],
- }
- ```
-
-> [!NOTE]
-> If you are on Windows, you have to use a Unix shell like [Git Bash](https://gitforwindows.org/). Unfortunately, the Windows command prompt and PowerShell do not support the `cat` command, which is used in the build script.
+1. [Install Bun](https://bun.sh/) if you don't have it:
+1. Install dependencies:
+ ```
+ bun install
+ ```
+1. Build daisyUI package:
+ ```
+ bun run build
+ ```
+1. Now you can use your local build of daisyUI in another local project by installing it as a dependency using Bun (or NPM, etc):
+ In your own local project where you want to use daisyUI:
+ ```
+ bun install /path/to/daisyui/packages/daisyui
+ ```
### To run the [documentation site](https://daisyui.com/) on local:
1. [[Fork](https://github.com/saadeghi/daisyui/fork) and] clone the repo on local
-1. Install all dependencies and build the package and documentation site using this command:
- ```
- npm run init
- ```
+1. [Install Bun](https://bun.sh/) if you don't have it:
+1. Install dependencies:
+ ```
+ bun install
+ ```
+1. Build daisyUI package:
+ ```
+ bun run build
+ ```
1. Run the document site:
- ```
- npm run dev
- ```
-
-## Adding a new component
-
-Before adding a new component, please make sure it's [start a discussion about it on GitHub](https://github.com/saadeghi/daisyui/discussions) so we can talk about how the structure and style should be.
-There is a `List of components` at the end of [/README.md](https://github.com/saadeghi/daisyui/blob/master/README.md) that I think would be a good to complete.
+ ```
+ bun run dev
+ ```
### File structure
-All component styles are in [`/src`](https://github.com/saadeghi/daisyui/tree/master/src) but it's important to separate the style to 4 files:
-
-- `/src/components/unstyled`: Styles that define the layout and placement of a component
- (for example: [layout of `tab` and `tabs`](https://github.com/saadeghi/daisyui/blob/master/src/components/unstyled/tab.css))
-- `/src/components/styled`: Styles that define the visual appearance of a component
- (for example: [colors and spacing of `alert`](https://github.com/saadeghi/daisyui/blob/master/src/components/styled/alert.css))
-- `/src/utilities/unstyled`: Styles that define the layout and placement of a variant of a component that must be responsive
- (for example: [sizes of a `.btn`](https://github.com/saadeghi/daisyui/blob/master/src/utilities/unstyled/button.css))
-- `/src/utilities/styled`: Styles that define the visual appearance of a variant of a component that must be responsive
- (for example: [colors of `alert`](https://github.com/saadeghi/daisyui/blob/master/src/utilities/styled/alert.css))
-
-> Separating styles to these 4 files, allows us to use daisyUI components with/without _design decision_ styles ([See `styled` config](styled)) and allows us to define some styles as responsive utilities (to work with `lg:`, `md:`, `sm:`, etc... prefixes)
-
-### Code samples with dynamic prefix
-
-If your component documentation page contains `pre` blocks for code samples, be sure to follow the example below so that the code will be displayed with the correct prefix dynamically set by user:
-
-```svelte
-
-
-
-
-
-
-
-
-
-
{`
-
-
-
-
-`}
-
+```js
+packages
+├── daisyui //daisyUI package
+│ ├── index.js //entry point
+│ ├── functions
+│ ├── src
+│ │ ├── base
+│ │ ├── components
+│ │ ├── themes
+│ │ ╰── utilities
+│ ╰── // generated files
+├── docs //documentation site
+│ ╰── src
+│ ├── routes
+│ │ ╰── (routes)
+│ │ ├── blog
+│ │ ├── components //component docs
+│ │ ├── docs //docs
+│ │ ╰── ...
+│ ╰── translations
+╰── playground //playground site
+ ╰── src
+ ╰── components
+ ╰── Component.astro // Where you can test things without committing
```
-
-### An example
-
-Let's say we want to add a new component named `.coolbutton` (don't add that actually 😅 )
-
-1. Add these files:
- ```
- /src/components/unstyled/coolbutton.css
- /src/components/styled/coolbutton.css
- ```
-1. Add your CSS there (you can use `@apply`)
- - `/unstyled/coolbutton.css` is for the structure of the component without any design decision
- - `/styled/coolbutton.css` is for the visual appearance of the component with colors, spacing, etc.
-1. Add a page to documentation site:
- ```
- /src/docs/src/routes/components/coolbutton/+page.svx
- ```
-1. Add page info and some HTML to your [Svelte](https://svelte.dev/) markdown ([mdsvex](https://mdsvex.pngwn.io/)) file that uses your class name
-
- ```mdx
- ---
- title: Coolbutton
- desc: It's a button but it's cool!
- published: true
- layout: components
- ---
-
-
- ```
-
-1. Build the documentation site:
- ```
- npm run dev
- ```
-1. Now when you open the site on localhost, you can see your new page, showing the new component with your style:
- ```
- http://localhost:3000/components/coolbutton
- ```
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index 1efc0e71e85..572f51ed88f 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -2,30 +2,12 @@ name: "📘 Deploy docs"
on:
workflow_dispatch:
- inputs:
- runtime:
- type: choice
- description: JS runtime
- default: "bun"
- options:
- - "bun"
- - "npm"
- daisyuiversion:
- type: choice
- description: DaisyUI release tag
- default: "latest"
- options:
- - "latest"
- - "alpha"
workflow_call:
- inputs:
- daisyuiversion:
- type: string
push:
branches:
- master
paths:
- - "src/docs/**"
+ - "packages/docs/**"
- "CHANGELOG.md"
jobs:
@@ -33,11 +15,9 @@ jobs:
timeout-minutes: 10
runs-on: ubuntu-latest
env:
- runtime: ${{ inputs.runtime || 'bun'}}
LEMONSQUEEZY_API_KEY: ${{ secrets.LEMONSQUEEZY_API_KEY }}
YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
GH_API_KEY: ${{ secrets.GH_API_KEY }}
- daisyuiversion: ${{ inputs.daisyuiversion || 'latest' }}
if: |
github.event_name == 'workflow_dispatch' ||
github.event_name == 'workflow_call' ||
@@ -50,63 +30,27 @@ jobs:
fetch-depth: 2
clean: false
- - name: Setup Node
- if: env.runtime == 'npm'
- uses: actions/setup-node@v4
- with:
- node-version: "21.1.0"
- registry-url: https://registry.npmjs.org
-
- - name: Setup bun
- if: env.runtime == 'bun'
+ - name: Setup Bun
uses: oven-sh/setup-bun@v1.2.2
- - name: Install package dependencies
- run: ${{ env.runtime }} install
+ - name: Install dependencies
+ run: bun i
- name: Build package
- run: ${{ env.runtime }} run build:skipfullcss
-
- - name: Install docs dependencies
- run: cd src/docs && ${{ env.runtime }} install
-
- - name: Install daisyUI ${{env.daisyuiversion}} version if production
- if: github.repository == 'saadeghi/daisyui'
- run: cd src/docs && ${{ env.runtime }} i daisyui@${{env.daisyuiversion}}
-
- - name: Install daisyUI newest tag if staging
- if: github.repository == 'daisyui/daisyui.github.io'
- run: |
- cd src/docs
- if [ "${{env.daisyuiversion}}" = "latest" ]; then
- ${{ env.runtime }} i daisyui@${{env.daisyuiversion}}
- else
- ${{ env.runtime }} i daisyui@$([[ $(npm view daisyui version) > $(npm view daisyui dist-tags.alpha) ]] && echo "latest" || echo "alpha")
- fi
-
- - name: Set daisyUI version in env file if staging
- if: github.repository == 'daisyui/daisyui.github.io'
- run: |
- echo 'VITE_DAISYUI_VERSION=ALPHA' > src/docs/.env
+ run: bun run build
- name: Add robots.txt if not main repo
if: github.repository != 'saadeghi/daisyui'
run: |
echo 'User-agent: *
- Disallow: /' > src/docs/static/robots.txt
+ Disallow: /' > packages/docs/static/robots.txt
- name: Build docs
- run: |
- cd src/docs
- if [ -z "${{inputs.daisyuiversion}}" ]; then
- ${{ env.runtime }} run build
- else
- VITE_DAISYUI_VERSION=${{inputs.daisyuiversion}} ${{ env.runtime }} run build
- fi
+ run: bun run build:docs
- name: Deploy docs to github pages
uses: peaceiris/actions-gh-pages@v4
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
- publish_dir: ./src/docs/build
+ publish_dir: ./packages/docs/build
cname: ${{ secrets.CNAME }}
diff --git a/.github/workflows/release-new-version.yml b/.github/workflows/release-new-version.yml
index 7bf0c48fd66..6bdcb42c9db 100644
--- a/.github/workflows/release-new-version.yml
+++ b/.github/workflows/release-new-version.yml
@@ -3,13 +3,6 @@ name: "🎉 Release new version"
on:
workflow_dispatch:
inputs:
- runtime:
- type: choice
- description: JS runtime
- default: "bun"
- options:
- - "bun"
- - "npm"
release-type:
type: choice
description: Release type
@@ -20,18 +13,13 @@ on:
branches:
- master
paths:
- - "src/**"
- - "!src/docs/**"
- - "!src/tests/**"
- - "!src/experiments/**"
+ - "packages/daisyui/**"
jobs:
build-publish:
name: 🔨 Build + 🚀 Publish
timeout-minutes: 10
runs-on: ubuntu-latest
- env:
- runtime: ${{ inputs.runtime || 'bun'}}
outputs:
daisyuiversion: ${{ steps.package-version.outputs.version }}
steps:
@@ -41,68 +29,37 @@ jobs:
fetch-depth: 1
clean: false
- - name: Setup Node
- if: env.runtime == 'npm'
- uses: actions/setup-node@v4
- with:
- node-version: "latest"
- registry-url: https://registry.npmjs.org
-
- name: Setup Bun
- if: env.runtime == 'bun'
uses: oven-sh/setup-bun@v1
- - name: Install package dependencies
- run: ${{ env.runtime }} install
+ - name: Install dependencies
+ run: bun i
- - name: build package
- run: ${{ env.runtime }} run build
+ - name: Build package
+ run: bun run build
- name: Run release command
if: github.repository == 'saadeghi/daisyui'
run: |
git config --local user.email "pouya.saadeghi@gmail.com"
git config --local user.name "Pouya Saadeghi"
- ${{ env.runtime }} run release${{ inputs.release-type }}
+ bun run release${{ inputs.release-type }}
- name: Read package version from package.json
id: package-version
run: |
- version=$(grep -o '"version": *"[^"]*"' package.json | cut -d'"' -f4)
+ version=$(grep -o '"version": *"[^"]*"' packages/daisyui/package.json | cut -d'"' -f4)
echo version=$version >> $GITHUB_OUTPUT
- - name: Update package version in src/docs/.env and commit
- if: github.repository == 'saadeghi/daisyui'
- id: commit
- run: |
- echo "VITE_DAISYUI_VERSION=${{ steps.package-version.outputs.version }}" > src/docs/.env
- git config --local user.email "pouya.saadeghi@gmail.com"
- git config --local user.name "Pouya Saadeghi"
- git add --all
- if [ -z "$(git status --porcelain)" ]; then
- echo push=false >> $GITHUB_OUTPUT
- else
- git commit -m "Update src/docs/.env" -a
- echo push=true >> $GITHUB_OUTPUT
- fi
- shell: bash
-
- name: Push changes
if: steps.commit.outputs.push == 'true'
uses: ad-m/github-push-action@master
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
- - name: Setup Node
- if: env.runtime != 'npm'
- uses: actions/setup-node@v4
- with:
- node-version: "latest"
- registry-url: https://registry.npmjs.org
-
- name: Publish package to NPM
if: github.repository == 'saadeghi/daisyui'
- run: npm publish
+ run: bun publish
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
@@ -120,7 +77,7 @@ jobs:
uses: ./.github/workflows/run-tests.yml
secrets: inherit
with:
- filter: " "
+ filter: ""
write-release-notes:
name: 📝 Release notes
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
index b949722be4b..6e13ff37c48 100644
--- a/.github/workflows/run-tests.yml
+++ b/.github/workflows/run-tests.yml
@@ -4,16 +4,9 @@ on:
workflow_dispatch:
inputs:
filter:
- type: choice
+ type: string
description: Filter tests
- default: " "
- options:
- - " "
- - "-t framework"
- - "-t contrast"
- - "-t foreground"
- - "-t variables"
- - "-t colors"
+ default: ""
workflow_call:
inputs:
filter:
@@ -22,15 +15,15 @@ on:
branches:
- master
paths:
- - "src/index.js"
- - "src/build.js"
- - "src/theming/**"
- - "src/lib/**"
+ - "packages/daisyui/functions/**"
+ - "packages/daisyui/src/**"
+ - "packages/daisyui/src/build.js"
+ - "packages/daisyui/src/index.js"
jobs:
tests:
timeout-minutes: 10
env:
- filter: ${{ inputs.filter || ' '}}
+ filter: ${{ inputs.filter }}
name: "Tests"
runs-on: ubuntu-latest
steps:
@@ -43,11 +36,16 @@ jobs:
- name: Setup bun
uses: oven-sh/setup-bun@v1
- - name: Install package dependencies
- run: bun install
+ - name: Install dependencies
+ run: bun i
- name: build package
- run: bun run build:skipfullcss
+ run: bun run build
- name: Run tests
- run: bun test ${{ env.filter }}
+ run: |
+ if [ -z "${{ env.filter }}" ]; then
+ bun test
+ else
+ bun test -t ${{ env.filter }}
+ fi
diff --git a/.gitignore b/.gitignore
index 773bce5d386..a0051b579aa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,21 +1,12 @@
node_modules
yarn.lock
-/package-lock.json
-.next
-/dist
-/colors
-/imports.js
-.idea
+package-lock.json
+bun.lockb
+bun.lock
+dist
+
.DS_Store
*.tgz
-/coverage
-.unlighthouse
.logs
-
-/base
-/components
-/utilities
-/theme
-
-/*.css
-/packages
+.env.local
+.svelte-kit
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000000..5b7ef95161f
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,6 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lockb
+bun.lock
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000000..137b995bbec
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,11 @@
+{
+ "useTabs": false,
+ "tabWidth": 2,
+ "printWidth": 100,
+ "semi": false,
+ "trailingComma": "all",
+ "plugins": [
+ "prettier-plugin-svelte",
+ "prettier-plugin-tailwindcss"
+ ]
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index 161c4add881..00000000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "recommendations": ["biomejs.biome", "inlang.vs-code-extension"]
-}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 45be23d9508..97b10a6878d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,809 +2,628 @@
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
-## 4.12.24 (2025-02-25)
+## 5.0.0
+
+> This is the detailed list of changes per component. Most of these changes won't affect your project, so if you want to learn about the breaking changes only, [check out the daisyUI 5 release notes](/docs/v5/)
+
+### Alert
+
+🆕 Additions
+- Added `alert-outline`, `alert-dash`, and `alert-soft` variants.
+- Added `alert-vertical` and `alert-horizontal` layout options.
+
+🔧 Changes
+- Instead of hardcoded responsive breakpoints, you can now use the `max-sm:alert-horizontal` or any other responsive breakpoint.
+
+### Artboard
+
+🗑️ Removals
+- **Breaking Change:** Removed all `artboard` and `phone-*` classes. These classes were simply setting the width and height of the div. Use Tailwind CSS `w-*` and `h-*` classes instead.
+
+| Before | After |
+| --- | --- |
+| `artboard phone-1` | `w-[320px] h-[568px]` |
+| `artboard phone-2` | `w-[375px] h-[667px]` |
+| `artboard phone-3` | `w-[414px] h-[736px]` |
+| `artboard phone-4` | `w-[375px] h-[812px]` |
+| `artboard phone-5` | `w-[414px] h-[896px]` |
+| `artboard phone-6` | `w-[320px] h-[1024px]` |
+
+| Before | After |
+| --- | --- |
+| `artboard artboard-horizontal phone-1` | `w-[568px] h-[320px]` |
+| `artboard artboard-horizontal phone-2` | `w-[667px] h-[375px]` |
+| `artboard artboard-horizontal phone-3` | `w-[736px] h-[414px]` |
+| `artboard artboard-horizontal phone-4` | `w-[812px] h-[375px]` |
+| `artboard artboard-horizontal phone-5` | `w-[896px] h-[414px]` |
+| `artboard artboard-horizontal phone-6` | `w-[1024px] h-[320px]` |
+
+```diff:page.html
+-
++
+```
+
+To be clear, `mockup-phone` is not removed. It just doesn't need the `artboard` class anymore.
+
+### Avatar
+
+🔧 Changes
+- **Breaking Change:** Renamed `online` class to `avatar-online`, `offline` to `avatar-offline`, and `placeholder` to `avatar-placeholder`.
+
+```diff:page.html
+-
++
+
+
+
+
+```
+```diff:page.html
+-
++
+
+
+
+
+```
+
+
+### Badge
+
+🆕 Additions
+- Added `badge-dash`, and `badge-soft` styles.
+- Added `badge-xl` size.
+- Added a default `gap-2` between content of badge so you don't have to add it manually to put a space between the text and icon.
+
+🔧 Changes
+- Adjusted sizes based on the new scale.
+
+### Breadcrumbs
+
+🆕 Additions
+- Added a default `gap-2` for the element inside list item so you don't have to add it manually to put a space between the text and icon.
+
+### Bottom Navigation
+
+🗑️ Removals
+- **Breaking Change:** Removed `bottom-nav` component. Use [`dock`](/components/dock/) component instead.
+- **Breaking Change:** Removed `btm-nav-xs`, `btm-nav-sm`, `btm-nav-md`, `btm-nav-lg`. Use `dock-xs`, `dock-sm`, `dock-md`, `dock-lg` instead.
+- **Breaking Change:** Removed `btm-nav-active`. Use `dock-active` instead.
+- **Breaking Change:** Removed `disabled` class of `bottom-nav`. Use `aria-disabled="true"` attribute or `disabled` attribute if it's a button. This is for better accessibility.
+
+```diff:page.html
+-
++
+
+-
++
+
+
+```
+
+### Button
+
+🆕 Additions
+- Added `btn-xl` size.
+- Added `btn-dash` and `btn-soft` styles.
+- Added box-shadow with if `--depth` effect is enabled.
+
+🔧 Changes
+- Reworked click animation which is now more subtle and fits better with any size of the button.
+- Adjusted size scale.
+- Adjusted font-size.
+- Adjusted padding.
+- Improved disabled state styling.
+- **Breaking Change:** Default height reduced; customizable via `--size-field`.
+- checked button (checkbox, radio) now has outline insteaed of forced primary color. This allows customization like `checked:btn-secondary`
+
+### Card
+
+🆕 Additions
+- Added `card-border` and `card-dash` styles which adapts the border width from the theme.
+- Added support for different card sizes (`card-xs`, `card-sm`, `card-md`, `card-lg`, `card-xl`).
+- Allow `
+