diff --git a/src/docs/src/components/Ads.svelte b/src/docs/src/components/Ads.svelte
index 0985fcec6f9..0315ffdab9c 100644
--- a/src/docs/src/components/Ads.svelte
+++ b/src/docs/src/components/Ads.svelte
@@ -113,88 +113,3 @@
{/if}
-
-
diff --git a/src/docs/src/components/Search.svelte b/src/docs/src/components/Search.svelte
index f00d807d5a5..089910ca817 100644
--- a/src/docs/src/components/Search.svelte
+++ b/src/docs/src/components/Search.svelte
@@ -87,61 +87,3 @@
{/if}
-
-
diff --git a/src/docs/src/components/StyleDevelopment.svelte b/src/docs/src/components/StyleDevelopment.svelte
index d1951cb9b72..65bc2b01923 100644
--- a/src/docs/src/components/StyleDevelopment.svelte
+++ b/src/docs/src/components/StyleDevelopment.svelte
@@ -9,4 +9,5 @@
const utilitiesUnstyled = import.meta.glob("../../../utilities/unstyled/*.css", { eager: true })
const utilitiesStyled = import.meta.glob("../../../utilities/styled/*.css", { eager: true })
import "tailwindcss/utilities.css"
+ import "../global.css"
diff --git a/src/docs/src/components/StyleProduction.svelte b/src/docs/src/components/StyleProduction.svelte
index a2a8d874cfc..60369d1d73f 100644
--- a/src/docs/src/components/StyleProduction.svelte
+++ b/src/docs/src/components/StyleProduction.svelte
@@ -1,3 +1,4 @@
diff --git a/src/docs/src/global.css b/src/docs/src/global.css
new file mode 100644
index 00000000000..9e1befa3bc1
--- /dev/null
+++ b/src/docs/src/global.css
@@ -0,0 +1,175 @@
+/* carbon */
+#carbonads * {
+ margin: initial;
+ padding: initial;
+}
+#carbonads {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+ "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+#carbonads {
+ display: flex;
+ max-width: 350px;
+ color: hsl(var(--bc));
+ background-color: hsl(var(--b2));
+ z-index: 100;
+ border-radius: 4px;
+ overflow: hidden;
+}
+#carbonads a {
+ color: inherit;
+ text-decoration: none;
+}
+#carbonads a:hover {
+ color: inherit;
+}
+#carbonads span {
+ position: relative;
+ display: block;
+ overflow: hidden;
+}
+#carbonads .carbon-wrap {
+ display: flex;
+}
+#carbonads .carbon-img {
+ display: block;
+ margin: 0;
+ line-height: 1;
+}
+#carbonads .carbon-img img {
+ display: block;
+}
+#carbonads .carbon-text {
+ font-size: 12px;
+ padding: 10px;
+ margin-bottom: 16px;
+ line-height: 1.3;
+ text-align: left;
+}
+#carbonads .carbon-poweredby {
+ display: block;
+ padding: 6px 8px;
+ background: hsl(var(--b3));
+ text-align: center;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ font-weight: 600;
+ font-size: 8px;
+ line-height: 1;
+ border-top-left-radius: 3px;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+}
+@media only screen and (min-width: 1280px) {
+ .carbon-text {
+ font-size: 12px;
+ padding: 8px 10px 4px 10px;
+ }
+ .carbonads-responsive #carbonads {
+ max-width: 130px;
+ }
+ .carbonads-responsive #carbonads .carbon-wrap {
+ flex-direction: column;
+ }
+ .carbonads-responsive #carbonads .carbon-poweredby {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ text-align: center;
+ border-radius: 0;
+ border-top-left-radius: 3px;
+ }
+}
+
+/* search */
+.searchbox.searchbox [data-svelte-typeahead][data-svelte-typeahead] {
+ background-color: transparent;
+ width: 100%;
+ max-width: 100%;
+}
+[data-svelte-search][data-svelte-search] label {
+ display: none;
+}
+[data-svelte-search][data-svelte-search] input {
+ background-color: transparent;
+ color: inherit;
+ border: 2px solid transparent;
+ border-radius: var(--rounded-btn);
+ padding-left: 2.5em;
+}
+[data-svelte-search][data-svelte-search] input::placeholder {
+ color: inherit;
+}
+[data-svelte-search][data-svelte-search] input:focus {
+ outline: none;
+ outline-offset: 0;
+ border: 2px solid hsl(var(--bc) / 0.2);
+ background-color: hsl(var(--b1));
+ color: hsl(var(--bc));
+}
+[data-svelte-typeahead][data-svelte-typeahead].dropdown[aria-expanded="true"]
+ .svelte-typeahead-list {
+ transform: translateY(0.5em);
+ background: hsl(var(--b1) / 0.99);
+ border: 0 solid hsl(var(--bc) / 0.2);
+ border-radius: var(--rounded-box);
+ overflow: hidden;
+ padding: 0.5rem;
+ backdrop-filter: blur(1rem);
+ margin-top: 0.5rem;
+ box-shadow:
+ rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
+ rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+}
+[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list .selected,
+[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list .selected:hover {
+ background: hsl(var(--n));
+ color: hsl(var(--nc));
+}
+[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li {
+ color: hsl(var(--bc));
+ border-radius: var(--rounded-btn);
+}
+[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li:hover {
+ background: hsl(var(--b2));
+ color: hsl(var(--bc));
+}
+[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li:not(:last-of-type) {
+ border-bottom: none;
+}
+
+/* prose */
+.prose code[class*="language-"],
+.code-wrapper code[class*="language-"],
+code[class*="language-"],
+pre[class*="language-"] {
+ background: unset;
+}
+.prose pre[class*="language-"] {
+ max-width: clamp(20rem, calc(100vw - 4rem), 80ch);
+ background-color: hsl(var(--n));
+ color: hsl(var(--nc));
+ ::selection {
+ background-color: hsl(var(--nc));
+ color: hsl(var(--n));
+ }
+}
+@media (min-width: 1024px) {
+ .prose pre[class*="language-"] {
+ max-width: clamp(20rem, calc(100vw - 20rem - 4rem), 80ch);
+ }
+}
+@media (min-width: 1280px) {
+ .prose pre[class*="language-"] {
+ max-width: clamp(20rem, calc(100vw - 20rem - 4rem - 8rem), 80ch);
+ }
+}
+
+/* changelog */
+.changelog-body h1#changelog + p {
+ display: none;
+}
+.changelog-body img {
+ @apply rounded-box border-base-content/10 border;
+}
diff --git a/src/docs/src/routes/(docs)/+layout.svelte b/src/docs/src/routes/(docs)/+layout.svelte
index 65f67a506ae..8bf4cda2a6b 100644
--- a/src/docs/src/routes/(docs)/+layout.svelte
+++ b/src/docs/src/routes/(docs)/+layout.svelte
@@ -60,9 +60,17 @@
-
-
+
+
@@ -142,31 +150,3 @@
{/if}
-
-
diff --git a/src/docs/src/routes/(docs)/docs/changelog/+page.svelte b/src/docs/src/routes/(docs)/docs/changelog/+page.svelte
index 40d1e689a82..7bbf6d735ae 100644
--- a/src/docs/src/routes/(docs)/docs/changelog/+page.svelte
+++ b/src/docs/src/routes/(docs)/docs/changelog/+page.svelte
@@ -5,12 +5,3 @@
-
-
diff --git a/src/docs/src/routes/blog/+layout.svelte b/src/docs/src/routes/blog/+layout.svelte
index cb165fdc993..6df651d84c7 100644
--- a/src/docs/src/routes/blog/+layout.svelte
+++ b/src/docs/src/routes/blog/+layout.svelte
@@ -45,9 +45,17 @@
type="application/rss+xml"
title="daisyUI Blog"
href="https://daisyui.com/blog/rss.xml" />
-
-
+
+
diff --git a/src/docs/vite.config.js b/src/docs/vite.config.js
index 4fb47dc2a5c..179028c5531 100644
--- a/src/docs/vite.config.js
+++ b/src/docs/vite.config.js
@@ -3,7 +3,7 @@ import { defineConfig, splitVendorChunkPlugin } from "vite"
import { sveltekit } from "@sveltejs/kit/vite"
export default defineConfig({
- plugins: [splitVendorChunkPlugin(), sveltekit()],
+ plugins: [sveltekit(), splitVendorChunkPlugin()],
resolve: {
alias: {
"@src": path.resolve("/src"),