%sveltekit.body%
53 |
54 |
55 |
--------------------------------------------------------------------------------
/packages/docs/src/components/AlternativeSidebar.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
21 |
--------------------------------------------------------------------------------
/packages/docs/src/components/Carbon.svelte:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/packages/docs/src/components/PrefixEdit.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
7 |
8 | {#if import.meta.env.DEV}
9 |
20 |
12 |
14 | {:else}
15 | Ads
13 |
16 |
18 | {/if}
19 |
18 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/docs/src/components/Translate.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 | {@html $t(text, variables)}
7 |
--------------------------------------------------------------------------------
/packages/docs/src/components/themegenerator/ThemeListItem.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
12 | {#if thumbnail}
13 |
14 | 
20 |
21 | {/if}
22 |
53 |
--------------------------------------------------------------------------------
/packages/docs/src/lib/mdsvex/layout-docs.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
23 |
42 | {#if published && tags}
43 |
24 |
25 | Published {timeago(date)}
26 |
27 | {#if author}
28 | by
29 |
30 | {author}
31 |
32 | {/if}
33 |
34 | {#if title}
35 | {title}
36 | {/if} 37 | {#if desc} 38 |{desc}
39 | {/if} 40 | {@render children?.()} 41 |
44 | Tags:
45 | {#each tags as tag}
46 |
47 | {tag}
48 |
49 | {/each}
50 |
51 | {/if}
52 |
17 |
36 |
--------------------------------------------------------------------------------
/packages/docs/src/lib/mediaQuery.js:
--------------------------------------------------------------------------------
1 | import { onMount } from "svelte"
2 | import { writable } from "svelte/store"
3 |
4 | export function useMediaQuery(query) {
5 | let mediaQuery = undefined
6 | const matches = writable(false)
7 |
8 | const update = () => {
9 | if (!mediaQuery) mediaQuery = window.matchMedia(query)
10 | matches.set(mediaQuery.matches)
11 | }
12 |
13 | onMount(() => {
14 | update()
15 |
16 | if (!mediaQuery) return
17 |
18 | if ("addEventListener" in mediaQuery) mediaQuery.addEventListener("change", update)
19 | else mediaQuery.addListener(update)
20 |
21 | return () => {
22 | if ("removeEventListener" in mediaQuery) mediaQuery.removeEventListener("change", update)
23 | else mediaQuery.removeListener(update)
24 | }
25 | })
26 |
27 | return matches
28 | }
29 |
--------------------------------------------------------------------------------
/packages/docs/src/lib/scripts/compare-translate-files.js:
--------------------------------------------------------------------------------
1 | import fs from "node:fs"
2 | import { diffString } from "json-diff"
3 |
4 | const translationDir = "src/translation"
5 |
6 | // Read all files from translation directory and filter out en.json
7 | fs.readdir(translationDir, (err, files) => {
8 | if (err) {
9 | console.error(err)
10 | return
11 | }
12 |
13 | const langs = files
14 | .filter((file) => file.endsWith(".json") && file !== "en.json")
15 | .map((file) => file.replace(".json", ""))
16 |
17 | for (const lang of langs) {
18 | fs.readFile("src/translation/en.json", "utf8", (err1, file1) => {
19 | if (err1) {
20 | console.error(err1)
21 | return
22 | }
23 | fs.readFile(`src/translation/${lang}.json`, "utf8", (err2, file2) => {
24 | if (err2) {
25 | console.error(err2)
26 | return
27 | }
28 | const diff = diffString(JSON.parse(file1), JSON.parse(file2), {
29 | keysOnly: true,
30 | })
31 | if (diff) {
32 | console.log(`EN 🆚 ${lang.toUpperCase()}\n${diff}`)
33 | }
34 | })
35 | })
36 | }
37 | })
38 |
--------------------------------------------------------------------------------
/packages/docs/src/lib/stores.js:
--------------------------------------------------------------------------------
1 | import { writable } from "svelte/store"
2 |
3 | export const prefix = writable("")
4 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/codepen/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "https://codepen.io/pen?template=BaqgrNP&editors=1000")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/components/artboard/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "/docs/upgrade/")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/components/bottom-navigation/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "/components/dock/")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/components/button-group/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "/components/join/")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/components/input-group/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "/components/join/")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/discord/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "https://discord.gg/S6TZxycVHs")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/docs/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "/docs/install/")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/docs/default-themes/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "/docs/themes/")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/docs/migrate/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "/docs/v5/")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/docs/v5-beta/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "/docs/v5/")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/installation/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "/docs/install/")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/resources/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "https://daisyui.com/resources/videos/")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/stackblitz/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "https://stackblitz.com/edit/daisyui5")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(redirects)/tailwindplay/+page.server.js:
--------------------------------------------------------------------------------
1 | export const ssr = false
2 | import { redirect } from "@sveltejs/kit"
3 | export function load() {
4 | redirect(301, "https://play.tailwindcss.com/L2yalFmJcY")
5 | }
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/(frameworks)/+layout.server.js:
--------------------------------------------------------------------------------
1 | import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
2 | import yaml from "js-yaml"
3 |
4 | async function fetchFrameworksData() {
5 | try {
6 | const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/data/frameworks.yaml`)
7 |
8 | if (!response.ok) {
9 | throw new Error(`Failed to fetch data: ${response.status}`)
10 | }
11 |
12 | const yamlFile = await response.text()
13 | return yaml.load(yamlFile)
14 | } catch (err) {
15 | console.error("Error fetching data:", err)
16 | return null
17 | }
18 | }
19 |
20 | export async function load() {
21 | const frameworksData = await fetchFrameworksData()
22 | const testimonialsResponse = await fetch("https://img.daisyui.com/generated/testimonials.json")
23 | const testimonials = await testimonialsResponse.json()
24 |
25 | return {
26 | testimonials,
27 | frameworksData: frameworksData.map(({ name, logo }) => ({ name, logo })),
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/+layout.server.js:
--------------------------------------------------------------------------------
1 | import themes from "daisyui/functions/themeOrder"
2 | import { pages, pagesThatDontNeedSidebar } from "$lib/data/pages.js"
3 |
4 | import { version } from "daisyui/package.json"
5 |
6 | export async function load() {
7 | return {
8 | pagesThatDontNeedSidebar,
9 | pages,
10 | themes,
11 | daisyuiVersion: version,
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/+page.server.js:
--------------------------------------------------------------------------------
1 | import { stats } from "$lib/data/stats.js"
2 |
3 | export async function load() {
4 | const testimonialsResponse = await fetch("https://img.daisyui.com/generated/testimonials.json")
5 | const testimonials = await testimonialsResponse.json()
6 | return {
7 | testimonials,
8 | stats,
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/blog/(posts)/daisyui-logo/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: New daisyUI logo!
3 | desc: "I've been working on a new logo for daisyUI for a long time. Here's the new logo!"
4 | published: true
5 | date: 2025-04-21
6 | author: Pouya Saadeghi
7 | thumbnail: https://img.daisyui.com/images/daisyui/wallpaper-black.png
8 | tags:
9 | - News
10 | ---
11 |
12 |
15 |
16 | Today we're having a brand refresh for daisyUI!
17 |
18 |
20 | {#if title}
21 |
34 | {@html $t(title)}
22 | {/if} 23 | {#if desc} 24 |{@html $t(desc)}
25 | {/if} 26 | {#if alert} 27 |
28 | {alert}
29 |
30 | {/if}
31 | {@render children?.()}
32 |
19 | 
27 |
28 |
29 | The new logo moves away from the minimal geometric shapes and focuses on a more playful and friendly design. I've been picky about the logo for a long time, and I think this new design represents daisyUI in a more accurate way.
30 |
31 | [Here you can get the files in PNG and SVG formats](/brand/). And if you're using daisyUI logo in your project, please consider using the new logo.
32 |
33 | Join our [Discord](/discord/) to talk about the new logo and share your feedback. I would love to hear your thoughts!
34 |
35 |
27 |
36 | 
44 |
45 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/blog/(posts)/discord/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "daisyUI is now on Discord!"
3 | desc: "Finally we have a Discord server for daisyUI!"
4 | published: true
5 | date: 2024-02-07
6 | author: Pouya Saadeghi
7 | thumbnail: https://img.daisyui.com/images/blog/daisyui-discord.webp
8 | tags:
9 | - News
10 | ---
11 |
12 |
15 |
16 | For a long time [GitHub discussions](https://github.com/saadeghi/daisyui/discussions) was the only place to ask questions and connect with other daisyUI developers. sharing ideas and getting help. I still see GitHub discussions as a great place for long-term discussions and feature requests because it's easy to search and find old discussions, it's integrated with the codebase and more importantly it's open to public and indexed by search engines.
17 |
18 | And from the beginning people were asking for a Discord server. I was trying to avoid it because I didn't want to spread the community across multiple platforms. But the truth is GitHub discussions is not a good place for real-time casual conversations.
19 |
20 | Starting today, I'm opening [a Discord server for daisyUI](https://daisyui.com/discord/). Join us to get help, share your projects and discuss daisyUI.
21 |
22 | GitHub issues are still the only place to report bugs. Please don't report bugs in Discord.
23 | And GitHub discussions are still the best place for long-term, organized discussions and feature requests.
24 |
25 | [Join daisyUI Discord server →](https://daisyui.com/discord/)
26 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/blog/+layout.server.js:
--------------------------------------------------------------------------------
1 | export async function load() {
2 | const allTags = await Promise.all(
3 | Object.entries(import.meta.glob("./[(]posts[)]/*/+page.md")).map(async ([_path, resolver]) => {
4 | const { metadata } = await resolver()
5 | if (!metadata.published) {
6 | return {}
7 | }
8 | return {
9 | ...metadata.tags,
10 | }
11 | }),
12 | )
13 |
14 | const tags = []
15 |
16 | for (const obj of allTags) {
17 | for (const key in obj) {
18 | const value = obj[key]
19 | if (!tags.includes(value)) {
20 | tags.push(value)
21 | }
22 | }
23 | }
24 |
25 | return {
26 | tags,
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/blog/+page.server.js:
--------------------------------------------------------------------------------
1 | import { dirname } from "node:path"
2 |
3 | export async function load() {
4 | let posts = await Promise.all(
5 | Object.entries(import.meta.glob("./[(]posts[)]/*/+page.md")).map(async ([path, resolver]) => {
6 | const { metadata } = await resolver()
7 | const slug = dirname(path).split("/").pop()
8 | if (!metadata.published) {
9 | return {}
10 | }
11 | return {
12 | slug,
13 | ...metadata,
14 | }
15 | }),
16 | )
17 |
18 | // filter out empty objects
19 | posts = posts.filter((obj) => Object.keys(obj).length !== 0)
20 |
21 | // sort by date
22 | posts = posts.sort((a, b) => new Date(b.date) - new Date(a.date))
23 |
24 | return {
25 | posts,
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/blog/+page.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
44 |
16 |
18 | {/if}
19 | Coming soon
17 |
20 | {#each posts as post}
21 |
25 | {#if post.thumbnail}
26 |
27 | 
33 |
34 | {/if}
35 |
46 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/blog/tag/[tag]/+page.server.js:
--------------------------------------------------------------------------------
1 | import { error } from "@sveltejs/kit"
2 | import { dirname } from "node:path"
3 |
4 | export async function load({ params }) {
5 | // Explicitly reference params.tag to ensure reactivity
6 | const currentTag = params.tag
7 |
8 | let posts = await Promise.all(
9 | Object.entries(import.meta.glob("./../../[(]posts[)]/*/+page.md")).map(
10 | async ([path, resolver]) => {
11 | const { metadata } = await resolver()
12 | const slug = dirname(path).split("/").pop()
13 | if (!metadata.published) {
14 | return {}
15 | }
16 | return {
17 | slug,
18 | ...metadata,
19 | }
20 | },
21 | ),
22 | )
23 |
24 | // Filter posts by the current tag
25 | posts = posts.filter((item) => {
26 | if (!item.tags) return false
27 | const normalizedTags = item.tags.map((tag) => tag.replace(/ /g, "-").toLowerCase())
28 | return normalizedTags.includes(currentTag) // Use referenced tag
29 | })
30 |
31 | posts = posts.filter((obj) => Object.keys(obj).length !== 0)
32 | posts = posts.sort((a, b) => new Date(b.date) - new Date(a.date))
33 |
34 | if (posts.length === 0) {
35 | error(404, "Not found")
36 | }
37 | return {
38 | params: { tag: currentTag }, // Explicitly return the tag
39 | posts,
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/blog/tag/[tag]/+page.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
36 |
43 |
44 | {/each}
45 | 37 | {post.title} 38 |
39 |40 | {post.desc} 41 |
42 |
11 | {#each data.posts as post}
12 |
16 | {#if post.thumbnail}
17 |
18 |
24 |
25 | {/if}
26 |
37 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/components/+layout.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 | {@render children?.()}
7 |
8 | {#if $page.url.pathname == "/components/modal/"}
9 |
10 |
27 |
34 |
35 | {/each}
36 | 28 | {post.title} 29 |
30 |31 | {post.desc} 32 |
33 |
11 |
19 |
20 |
21 |
12 |
18 | Hello!
13 |This modal works with a hidden checkbox!
14 |
15 |
16 |
17 |
22 |
30 |
31 |
23 |
28 |
29 | Congratulations random Internet user!
24 |25 | You've been selected for a chance to get one year of subscription to use Wikipedia for free! 26 |
27 |
32 |
40 |
41 | {/if}
42 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/components/+page.server.js:
--------------------------------------------------------------------------------
1 | import { dirname } from "node:path"
2 |
3 | export async function load() {
4 | const components = await Promise.all(
5 | Object.entries(import.meta.glob("./*/+page.md")).map(async ([path, resolver]) => {
6 | const { metadata } = await resolver()
7 | const slug = dirname(path).split("/").pop()
8 | return { ...metadata, slug }
9 | }),
10 | )
11 |
12 | return {
13 | components,
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/components/+page.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
12 |
43 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/components/button/accessibility/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | alert: This page is not up to date. Some of the examples might not work as expected.
3 | title: Button
4 | desc: Buttons allow the user to take actions or make choices.
5 | layout: components
6 | showComponentPageTabs: true
7 | ---
8 |
9 |
12 |
13 | soon
14 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/components/mockup-browser/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Browser mockup
3 | desc: Browser mockup shows a box that looks like a browser window.
4 | layout: components
5 | classnames:
6 | component:
7 | - class: mockup-browser
8 | desc: Browser mockup
9 | part:
10 | - class: mockup-browser-toolbar
11 | desc: Toolbar part which can include addressbar, etc
12 | ---
13 |
14 |
18 |
19 | ### ~browser mockup with border
20 |
13 |
41 |
14 |
15 |
17 | {Object.keys(components).length}
20 | {#each components as { slug, title, desc }}
21 |
25 |
26 | 
32 |
33 |
40 |
32 |
34 |
35 |
37 |
38 | {/each}
39 |
21 |
24 |
26 |
27 | ```html
28 | Hello!
25 |
29 |
32 |
34 | ```
35 |
36 |
37 | ### ~browser mockup with background color
38 | Hello!
33 |
39 |
42 |
44 |
45 | ```html
46 | Hello!
43 |
47 |
50 |
52 | ```
53 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/components/mockup-phone/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Phone mockup
3 | desc: Phone mockup shows a mockup of an iPhone.
4 | layout: components
5 | classnames:
6 | component:
7 | - class: mockup-phone
8 | desc: Phone mockup
9 | part:
10 | - class: mockup-phone-camera
11 | desc: Camera part
12 | - class: mockup-phone-display
13 | desc: Display part
14 | ---
15 |
16 |
20 |
21 | ### ~iPhone mockup
22 | Hello!
51 |
23 |
24 |
26 |
27 | ```html
28 | It's Glowtime.
25 |
29 |
30 |
32 | ```
33 |
34 |
35 | ### ~With color and wallpaper
36 | It's Glowtime.
31 |
37 |
38 |
42 |
43 | ```html
44 |
39 | 
40 |
41 |
40 |
45 |
46 |
50 | ```
51 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/components/mockup-window/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Window mockup
3 | desc: Window mockup shows a box that looks like an operating system window.
4 | layout: components
5 | classnames:
6 | component:
7 | - class: mockup-window
8 | desc: OS window mockup
9 | ---
10 |
11 |
15 |
16 | ### ~window mockup with border
17 |
47 |
48 |
49 |
48 |
18 |
20 |
21 | ```html
22 | Hello!
19 |
23 |
25 | ```
26 |
27 |
28 | ### ~window mockup with background color
29 | Hello!
24 |
30 |
32 |
33 | ```html
34 | Hello!
31 |
35 |
37 | ```
38 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/docs/+layout.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 | {@render children?.()}
6 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/docs/changelog/+page.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 | Hello!
36 |
10 |
12 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/docs/customize/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Customize daisyUI components
3 | desc: How to customize daisyUI?
4 | ---
5 |
6 |
9 |
10 | 
ChatGPT LLM setup
11 |
12 | ### Quick use
13 |
14 | [daisyui.com/llms.txt](https://daisyui.com/llms.txt) file is a compact, text version of daisyUI docs to help AI generate accurate daisyUI code based on your prompt.
15 |
16 | In Chat window, enable `🌐 Search` feature, and add this before your prompt:
17 |
18 | ```md:prompt
19 | https://daisyui.com/llms.txt
20 | ```
21 |
22 | For example:
23 |
24 | ```md:prompt
25 | https://daisyui.com/llms.txt give me a light daisyUI 5 theme with tropical color palette
26 | ```
27 |
28 | ### MCP server
29 |
30 | coming soon…
31 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/docs/editor/claude/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Claude desktop setup for daisyUI
3 | desc: Setup Claude desktop to correctly generate daisyUI code based on your prompt.
4 | ---
5 |
6 |
9 |
10 | ## 
Claude desktop LLM setup
11 |
12 | ### Quick use
13 |
14 | coming soon…
15 |
16 | ### MCP server
17 |
18 | MCP is a an API to communicate with AI models. You can add MCP servers and Claude will communicate with them to get more accurate results.
19 |
20 | I suggest using [Context7](https://context7.com/) [MCP server](https://github.com/upstash/context7-mcp) which provides many libraries including daisyUI.
21 |
22 | 1. Go to Settings > Developer
23 | 2. Click `Edit Config` button
24 | 3. Add this to the config file:
25 |
26 | ```diff:claude_desktop_config.json
27 | {
28 | "mcpServers": {
29 | + "Context7": {
30 | + "type": "stdio",
31 | + "command": "npx",
32 | + "args": ["-y", "@upstash/context7-mcp@latest"]
33 | + }
34 | }
35 | }
36 | ```
37 |
38 | 4. Now you can ask AI anything about daisyUI, and write `use context7` at the end of your prompt.
39 | For example:
40 | ```md:prompt
41 | give me a light daisyUI 5 theme with tropical color palette. use context7
42 | ```
43 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/docs/editor/cline/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Cline setup for daisyUI
3 | desc: Setup Cline VSCode extension to correctly generate daisyUI code based on your prompt.
4 | ---
5 |
6 |
9 |
10 | ## 
Cline VSCode extension
11 |
12 | [daisyui.com/llms.txt](https://daisyui.com/llms.txt) file is a compact, text version of daisyUI docs to help AI generate accurate daisyUI code based on your prompt.
13 | Here's how to use daisyUI llms.txt in Cline:
14 |
15 | ### Quick use
16 |
17 | In chat window type this before your prompt and Cline will use daisyUI's llms.txt file to generate code.
18 |
19 | ```md:prompt
20 | https://daisyui.com/llms.txt
21 | ```
22 |
23 | ### Project-level permanent setup
24 |
25 | You can setup daisyUI's llms.txt file to your repo so Cline can use it by default.
26 |
27 | Run this command to save the llms.txt file to `.clinerules/daisyui.md`
28 |
29 | ```sh:Terminal
30 | curl -L https://daisyui.com/llms.txt --create-dirs -o .clinerules/daisyui.md
31 | ```
32 |
33 | ### MCP server
34 |
35 | MCP is a an API to communicate with AI models. You can add MCP servers and Copilot will communicate with them to get more accurate results.
36 |
37 | I suggest using [Context7](https://context7.com/) [MCP server](https://github.com/upstash/context7-mcp) which provides many libraries including daisyUI.
38 |
39 | 1. Install `Context7` from Cline MCP marketplace
40 | 2. Now can ask AI anything about daisyUI, and write `use context7` at the end of your prompt.
41 | For example:
42 |
43 | ```md:prompt
44 | give me a light daisyUI 5 theme with tropical color palette. use context7
45 | ```
46 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/docs/editor/gemini/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Gemini setup for daisyUI
3 | desc: Setup Gemini to correctly generate daisyUI code based on your prompt.
4 | ---
5 |
6 |
9 |
10 | ## 
Gemini LLM setup
11 |
12 | ### Quick use
13 |
14 | [daisyui.com/llms.txt](https://daisyui.com/llms.txt) file is a compact, text version of daisyUI docs to help AI generate accurate daisyUI code based on your prompt.
15 |
16 | In Chat window, enable `🔍 Deep research` feature, and add this before your prompt:
17 |
18 | ```md:prompt
19 | https://daisyui.com/llms.txt
20 | ```
21 |
22 | For example:
23 |
24 | ```md:prompt
25 | https://daisyui.com/llms.txt give me a light daisyUI 5 theme with tropical color palette
26 | ```
27 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/docs/editor/grok/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Grok setup for daisyUI
3 | desc: Setup Grok to correctly generate daisyUI code based on your prompt.
4 | ---
5 |
6 |
9 |
10 | ## 
Grok LLM setup
11 |
12 | ### Quick use
13 |
14 | [daisyui.com/llms.txt](https://daisyui.com/llms.txt) file is a compact, text version of daisyUI docs to help AI generate accurate daisyUI code based on your prompt.
15 |
16 | #### Through Deep Search
17 |
18 | In Chat window, enable `꩜ Deep Search` feature, and add this before your prompt:
19 |
20 | ```md:prompt
21 | https://daisyui.com/llms.txt
22 | ```
23 |
24 | For example:
25 |
26 | ```md:prompt
27 | https://daisyui.com/llms.txt give me a light daisyUI 5 theme with tropical color palette
28 | ```
29 |
30 | #### Through Workspace (SuperGrok Only)
31 |
32 | This method gives much faster result as you don't need the `꩜ Deep Search` feature.
33 |
34 | You can create a dedicated `Workspace` where you can upload the `llms.txt` file. To download the file, visit [https://daisyui.com/llms.txt](https://daisyui.com/llms.txt), right-click, and select "Save As...". Once downloaded, upload the file as an attachment in the Grok Workspace.
35 |
36 | From then on, every conversation in this Workspace will have access to the daisyUI documentation.
37 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/docs/install/+layout.server.js:
--------------------------------------------------------------------------------
1 | import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
2 | import yaml from "js-yaml"
3 |
4 | export async function load() {
5 | try {
6 | const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/data/frameworks.yaml`)
7 |
8 | if (!response.ok) {
9 | throw new Error(`Failed to fetch frameworks: ${response.status}`)
10 | }
11 |
12 | const yamlFile = await response.text()
13 | const frameworks = yaml.load(yamlFile)
14 |
15 | return {
16 | frameworks,
17 | }
18 | } catch (error) {
19 | console.error("Error loading frameworks:", error)
20 | return {
21 | frameworks: [],
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/docs/install/angular/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Install daisyUI for Angular
3 | desc: How to install Tailwind CSS and daisyUI in a Angular project
4 | ---
5 |
6 |
9 |
10 | ### 1. Create a new Angular project
11 |
12 | Install Angular CLI globally
13 |
14 | ```sh:Terminal
15 | npm install -g @angular/cli@latest
16 | ```
17 |
18 | Create a new Angular project called `my-project` and navigate to it
19 |
20 | ```sh:Terminal
21 | ng new my-project --style css
22 | cd my-project
23 | ```
24 |
25 | ### 2. Install Tailwind CSS, PostCSS, and daisyUI
26 |
27 | ```sh:Terminal
28 | npm install daisyui@latest tailwindcss@latest @tailwindcss/postcss@latest postcss@latest --force
29 | ```
30 |
31 | Add Tailwind CSS plugin for PostCSS to a new `.postcssrc.json` file at root
32 |
33 | ```json:.postcssrc.json
34 | {
35 | "plugins": {
36 | "@tailwindcss/postcss": {}
37 | }
38 | }
39 | ```
40 |
41 | Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)
42 |
43 | ```postcss:src/styles.css
44 | @import "tailwindcss";
45 | @plugin "daisyui";
46 | ```
47 |
48 | Run the Angular development server
49 | ```sh:Terminal
50 | ng serve
51 | ```
52 |
53 | Now you can use daisyUI class names!
54 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/docs/install/astro/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Install daisyUI for Astro
3 | desc: How to install Tailwind CSS and daisyUI in a Astro project
4 | ---
5 |
6 |
9 |
10 | ### 1. Create a new Astro project
11 |
12 | Create a new Astro project in the current directory
13 |
14 | ```sh:Terminal
15 | npm create astro@latest ./
16 | ```
17 |
18 | ### 2. Install Tailwind CSS and daisyUI
19 |
20 | ```sh:Terminal
21 | npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
22 | ```
23 |
24 | Add Tailwind CSS to Astro config
25 |
26 | ```js:astro.config.mjs
27 | // @ts-check
28 | import { defineConfig } from "astro/config";
29 | import tailwindcss from "@tailwindcss/vite";
30 |
31 | export default defineConfig({
32 | vite: {
33 | plugins: [tailwindcss()],
34 | },
35 | });
36 | ```
37 |
38 | Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)
39 |
40 | ```postcss:src/assets/app.css
41 | @import "tailwindcss";
42 | @plugin "daisyui";
43 | ```
44 |
45 | Import the CSS file on top of your astro Layout file
46 | ```js:src/layouts/Layout.astro
47 | ---
48 | import "../assets/app.css";
49 | ---
50 | ```
51 |
52 | Now you can use daisyUI class names!
53 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/docs/install/bun/+page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Use daisyUI in a Bun dev server
3 | desc: How to use Tailwind CSS and daisyUI in a Bun dev server
4 | ---
5 |
6 |
9 |
10 | Using Bun 1.2.4+ you can serve HTML and CSS files directly in a [dev server](https://bun.sh/docs/bundler/fullstack). Here's how to setup daisyUI for it.
11 |
12 | ### 1. Create a new Bun project
13 |
14 | Create a new Bun project in the current directory
15 |
16 | ```sh:Terminal
17 | bun init -y
18 | ```
19 |
20 | ### 2. Install bun-plugin-tailwind and daisyUI
21 |
22 | ```sh:Terminal
23 | bun install bun-plugin-tailwind daisyui@latest
24 | ```
25 |
26 | Create a `bunfig.toml` file at root and add bun-plugin-tailwind as a plugin
27 |
28 | ```toml:bunfig.toml
29 | [serve.static]
30 | plugins = ["bun-plugin-tailwind"]
31 | ```
32 |
33 | ### 3. Add HTML and CSS files
34 |
35 | Create `index.html` at root
36 |
37 | ```html:index.html
38 |
39 |
40 |
41 |
14 |
40 |
41 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/resources/articles/+page.server.js:
--------------------------------------------------------------------------------
1 | import { articles } from "$lib/data/articles.js"
2 |
3 | export async function load() {
4 | return {
5 | articles,
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/resources/courses/+page.server.js:
--------------------------------------------------------------------------------
1 | import { courses } from "$lib/data/courses.js"
2 |
3 | export async function load() {
4 | return {
5 | courses,
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/resources/videos/+page.server.js:
--------------------------------------------------------------------------------
1 | import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
2 | export async function load() {
3 | try {
4 | const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/api/youtube.json`)
5 | if (!response.ok) {
6 | throw new Error(`HTTP error! status: ${response.status}`)
7 | }
8 | const videos = await response.json()
9 |
10 | // remove extra data from json
11 | for (const video of videos) {
12 | video.etag = undefined
13 | video.kind = undefined
14 | video.snippet.publishedAt = undefined
15 | video.snippet.categoryId = undefined
16 | video.snippet.thumbnails.default = undefined
17 | video.snippet.thumbnails.medium = undefined
18 | video.snippet.thumbnails.high.width = undefined
19 | video.snippet.thumbnails.high.height = undefined
20 | video.status.privacyStatus = undefined
21 | video.status.license = undefined
22 | video.status.publicStatsViewable = undefined
23 | }
24 |
25 | return {
26 | videos,
27 | }
28 | } catch (error) {
29 | console.error("Error fetching YouTube data:", error)
30 | return {
31 | videos: [], // Return empty array in case of error
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/resources/videos/[id]/+page.server.js:
--------------------------------------------------------------------------------
1 | import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
2 | import { error } from "@sveltejs/kit"
3 | import { slugify } from "$lib/util"
4 |
5 | export async function load({ params }) {
6 | try {
7 | // Fetch videos from API endpoint
8 | const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/api/youtube.json`)
9 | if (!response.ok) {
10 | throw error(response.status, "Failed to fetch videos")
11 | }
12 | const videos = await response.json()
13 |
14 | // Find the specific video
15 | const video = videos.find(
16 | (item) => `${slugify(item.snippet.title)}-${slugify(item.id)}` === params.id,
17 | )
18 |
19 | // If video not found, throw 404
20 | if (!video) {
21 | throw error(404, "Video not found")
22 | }
23 |
24 | // 404 if video is not embeddable
25 | if (video.status.embeddable === false) {
26 | throw error(404, "Not found")
27 | }
28 |
29 | return {
30 | videos,
31 | video,
32 | }
33 | } catch (err) {
34 | // Handle any fetch or processing errors
35 | throw error(500, err.message || "Failed to load video data")
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/resources/videos/[id]/+page.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
15 |
36 | {@render children?.()}
37 |
38 | 24 | {data.videos.find((video) => video.id == data.video.id).snippet.title} 25 |
26 | 27 |
28 |
32 |
33 |
49 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/store/+layout.server.js:
--------------------------------------------------------------------------------
1 | import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
2 | import { LEMONSQUEEZY_API_KEY } from "$env/static/private"
3 | import yaml from "js-yaml"
4 |
5 | const LSParams = {
6 | headers: {
7 | Accept: "application/vnd.api+json",
8 | "Content-type": "application/vnd.api+json",
9 | Authorization: `Bearer ${LEMONSQUEEZY_API_KEY}`,
10 | },
11 | }
12 |
13 | const fetchStoreData = async () => {
14 | try {
15 | const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/data/store.yaml`)
16 |
17 | if (!response.ok) {
18 | throw new Error(`Failed to fetch store data: ${response.status}`)
19 | }
20 |
21 | const yamlText = await response.text()
22 | return yaml.load(yamlText)
23 | } catch (e) {
24 | console.error(`Error loading or parsing YAML`, e)
25 | throw error(500, "Server configuration error: Could not load data")
26 | }
27 | }
28 |
29 | export async function load() {
30 | const yamlData = await fetchStoreData()
31 |
32 | const productsResponse = await fetch(
33 | "https://api.lemonsqueezy.com/v1/products?page[size]=100",
34 | LSParams,
35 | )
36 | let sortedData
37 | if (!productsResponse.ok) {
38 | sortedData = []
39 | } else {
40 | const originalData = await productsResponse.json()
41 | const additionalInfoMap = new Map(
42 | yamlData.productCustomAttributes.map((item) => [item.id, item]),
43 | )
44 | sortedData = yamlData.productCustomAttributes
45 | .map(({ id }) => {
46 | const originalItem = originalData.data.find((item) => Number.parseInt(item.id) === id)
47 | return originalItem ? { ...originalItem, ...additionalInfoMap.get(id) } : null
48 | })
49 | .filter((item) => item !== null)
50 | }
51 | return {
52 | tech: yamlData.tech,
53 | techFilters: yamlData.techFilters,
54 | products: sortedData,
55 | futureProducts: yamlData.futureProducts,
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/store/+layout.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 | 29 | {data.videos.find((video) => video.id == data.video.id).snippet.description} 30 |
31 |
13 | {@render children?.()}
14 |
15 |
16 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/store/[productId]/+page.server.js:
--------------------------------------------------------------------------------
1 | import { PUBLIC_DAISYUI_API_PATH } from "$env/static/public"
2 | import { compile } from "mdsvex"
3 | import yaml from "js-yaml"
4 | import { error } from "@sveltejs/kit"
5 |
6 | const fetchStoreData = async () => {
7 | try {
8 | const response = await fetch(`${PUBLIC_DAISYUI_API_PATH}/data/store.yaml`)
9 |
10 | if (!response.ok) {
11 | throw new Error(`Failed to fetch store data: ${response.status}`)
12 | }
13 |
14 | const yamlText = await response.text()
15 | return yaml.load(yamlText)
16 | } catch (e) {
17 | console.error(`Error loading or parsing YAML`, e)
18 | throw error(500, "Server configuration error: Could not load data")
19 | }
20 | }
21 |
22 | export async function load({ params, parent }) {
23 | const yamlData = await fetchStoreData()
24 | const products = await parent()
25 | // Convert both to strings or numbers for comparison
26 | const product = products.products.find((p) => String(p.id) === String(params.productId))
27 |
28 | if (!product) {
29 | throw error(404, "Product not found")
30 | }
31 | // const mdDesc = await compile(product.desc, {
32 | // smartypants: false,
33 | // })
34 | // const compiledDesc = mdDesc.code
35 |
36 | async function md(markdown) {
37 | const compiledMd = await compile(markdown, {
38 | smartypants: false,
39 | })
40 | return compiledMd.code
41 | }
42 |
43 | return {
44 | products,
45 | product: {
46 | ...product,
47 | desc: product.desc && (await md(product.desc)),
48 | banner: product.banner && (await md(product.banner)),
49 | },
50 | tech: products.tech,
51 | faq: yamlData.faq,
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/(routes)/store/checkout/+page.server.js:
--------------------------------------------------------------------------------
1 | export const csr = false
2 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/+error.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
11 |
12 |
13 |
43 |
--------------------------------------------------------------------------------
/packages/docs/src/routes/+layout.js:
--------------------------------------------------------------------------------
1 | export const prerender = true
2 | export const trailingSlash = "always"
3 | // export const csr = true
4 |
--------------------------------------------------------------------------------
/packages/docs/static/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
11 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/docs/static/ads.txt:
--------------------------------------------------------------------------------
1 | google.com, pub-4812562253949561, DIRECT, f08c47fec0942fa0
2 |
--------------------------------------------------------------------------------
/packages/docs/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saadeghi/daisyui/a8b531cd9a662ca3353121a37bd346aaf2865eea/packages/docs/static/favicon.ico
--------------------------------------------------------------------------------
/packages/docs/static/manifest.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "icons": [
3 | {
4 | "src": "https://img.daisyui.com/images/daisyui/daisyui-logo-192.png",
5 | "type": "image/png",
6 | "sizes": "192x192"
7 | },
8 | {
9 | "src": "https://img.daisyui.com/images/daisyui/daisyui-logo-512.png",
10 | "type": "image/png",
11 | "sizes": "512x512"
12 | }
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/packages/docs/static/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: AhrefsBot
2 | Disallow: /resources/
3 | Disallow: /blog/
4 | Disallow: /store/
5 | Disallow: /compare/
6 | Disallow: /alternative/
7 | Disallow: /docs/install/
8 | Disallow: /*-component-library/
9 |
10 | User-agent: *
11 | Allow: /
12 |
--------------------------------------------------------------------------------
/packages/docs/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from "@sveltejs/adapter-static"
2 |
3 | import { mdsvexConfig, mdsvexExtensions } from "./src/lib/mdsvex/mdsvex.config.js"
4 |
5 | export default {
6 | extensions: [".svelte", ...mdsvexExtensions],
7 | preprocess: [mdsvexConfig],
8 | kit: {
9 | adapter: adapter({
10 | pages: "build",
11 | assets: "build",
12 | fallback: null,
13 | // precompress: true,
14 | }),
15 | },
16 | onwarn: (warning, handler) => {
17 | if (["a11y_", "non_reactive_update"].some((code) => warning.code.startsWith(code))) {
18 | return
19 | }
20 | handler(warning)
21 | },
22 | }
23 |
--------------------------------------------------------------------------------
/packages/docs/vite.config.js:
--------------------------------------------------------------------------------
1 | import path from "node:path"
2 | import { defineConfig } from "vite"
3 | import { sveltekit } from "@sveltejs/kit/vite"
4 | import tailwindcss from "@tailwindcss/vite"
5 | import { visualizer } from "rollup-plugin-visualizer"
6 |
7 | export default defineConfig({
8 | plugins: [
9 | tailwindcss(),
10 | sveltekit(),
11 | visualizer({
12 | emitFile: true,
13 | filename: "stats.html",
14 | template: "treemap",
15 | brotliSize: true,
16 | }),
17 | ],
18 | resolve: {
19 | alias: {
20 | $components: path.resolve("/src/components"),
21 | },
22 | },
23 | })
24 |
--------------------------------------------------------------------------------
/packages/logs/.gitignore:
--------------------------------------------------------------------------------
1 | *.json
2 | index.js
3 |
--------------------------------------------------------------------------------
/packages/playground/.gitignore:
--------------------------------------------------------------------------------
1 | /dist
2 | /.astro
3 | .astro/settings.json
4 | /src/components/Component.astro
5 |
6 | /src/pages/*
7 | !/src/pages/demo.astro
8 | !/src/pages/dark.astro
9 | !/src/pages/light.astro
10 | !/src/pages/index.astro
11 | !/src/pages/LTR.astro
12 | !/src/pages/RTL.astro
13 | !/src/pages/prefix.astro
14 | !/src/pages/calendar.astro
15 | !/src/pages/all.astro
16 |
17 | /src/layouts/*
18 | !/src/layouts/Main.astro
19 |
--------------------------------------------------------------------------------
/packages/playground/astro.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "astro/config"
2 | import tailwindcss from "@tailwindcss/vite"
3 |
4 | import react from "@astrojs/react"
5 | import vue from "@astrojs/vue"
6 |
7 | export default defineConfig({
8 | integrations: [react(), vue()],
9 | devToolbar: {
10 | enabled: false,
11 | },
12 | vite: {
13 | plugins: [tailwindcss()],
14 | },
15 | })
16 |
--------------------------------------------------------------------------------
/packages/playground/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "module",
3 | "private": true,
4 | "name": "daisyui-playground",
5 | "scripts": {
6 | "predev": "if ! [ -f src/components/Component.astro ]; then echo '' > src/components/Component.astro; fi",
7 | "dev": "astro dev --open",
8 | "build": "astro build",
9 | "preview": "astro preview"
10 | },
11 | "devDependencies": {
12 | "astro": "5.5.3",
13 | "daisyui": "workspace:*"
14 | },
15 | "dependencies": {
16 | "@astrojs/react": "4.2.1",
17 | "@astrojs/vue": "5.0.7",
18 | "pikaday": "1.8.2",
19 | "react": "19.0.0",
20 | "react-day-picker": "9.6.3",
21 | "react-dom": "19.0.0"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/playground/src/components/Pikaday.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef } from "react"
2 | import Pikaday from "pikaday"
3 |
4 | const PikadayComponent = ({ format, options, onInput }) => {
5 | const inputRef = useRef(null)
6 |
7 | useEffect(() => {
8 | const picker = new Pikaday({
9 | field: inputRef.current,
10 | format: format,
11 | onSelect: () => {
12 | if (onInput) {
13 | onInput(picker.toString())
14 | }
15 | },
16 | ...options,
17 | })
18 |
19 | return () => {
20 | picker.destroy()
21 | }
22 | }, [format, options, onInput])
23 |
24 | return (
25 |
31 | )
32 | }
33 |
34 | export default PikadayComponent
35 |
--------------------------------------------------------------------------------
/packages/playground/src/components/Pikaday.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
21 |
--------------------------------------------------------------------------------
/packages/playground/src/components/ReactDayPicker.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react"
2 | import { DayPicker } from "react-day-picker"
3 |
4 | export default function MyDatePicker() {
5 | const [selected, setSelected] = useState()
6 |
7 | return (
8 | <>
9 |
16 |
12 |
17 |
18 |
17 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/packages/playground/src/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
8 |
32 |
9 |
19 |
31 | Welcome to daisyUI playground
10 |
11 |
18 | This is a Astro project where you can test daisyUI components from the source style (not the NPM package)
12 |13 | Start by editing this file: 14 |
/src/experiments/playground/src/components/Component.astro15 | 16 |
You can see the result and test the components in the following pages:
17 |