Cute Moddy Insta Post · Free Product Road Map Templates PPT For Management Team · Mar 26, 2026 · Mar 27, 2026
diff --git a/Seed Business Cards b/Seed Business Cards
@@ -50,6 +50,24 @@ function App() {
 }
 ```
 
+
+## daisyUI Adapter Theme (No Tailwind Required)
+
+If you already use daisyUI theme variables, you can make Kinu components inherit them:
+
+```tsx
+import 'kinu/style.css';
+import 'kinu/themes/daisyui.css';
+```
+
+Then set any daisyUI theme on a container (or `<html>`):
+
+```html
+<html data-theme="night">
+```
+
+The adapter is authored with real daisyUI component classes (`btn`, `input`, `select`, `badge`, `alert`, `tabs`, etc.) and shipped as a precompiled CSS file. Consumers only import `kinu/themes/daisyui.css` and can use daisyUI `[data-theme]` themes without installing Tailwind.
+
 ## Live Demo
 
 Check out the [live demo](https://kinu.sh) to see all components in action.

diff --git a/Social Madial Post b/Social Madial Post
diff --git a/Email Template For Promoting A Product Launch b/Email Template For Promoting A Product Launch
@@ -3,6 +3,13 @@ import {Dialog, Button, Label, toast, Collapsible, Tooltip} from 'kinu';
 
 const CUSTOM_THEME_STORAGE_KEY = 'kinu-custom-theme';
 const CUSTOM_THEME_STYLE_ID = 'kinu-custom-style';
+const STYLE_ENGINE_STORAGE_KEY = 'kinu-style-engine';
+const DAISY_THEME_STORAGE_KEY = 'kinu-daisy-theme';
+const DAISY_ADAPTER_STYLE_ID = 'kinu-daisyui-adapter';
+const DAISY_ADAPTER_HREF = new URL('./daisyui-adapter.css', import.meta.url).href;
+const DAISY_THEMES = ['night', 'cupcake', 'business', 'nord', 'retro'] as const;
+
+type StyleEngine = 'kinu' | 'daisyui';
 
 /* ── hex→HSL helper ───────────────────────────────────────── */
 function hexToHsl(hex: string): [number, number, number] {
@@ -229,6 +236,20 @@ function applyCustomTheme(css: string) {
  document.head.appendChild(style);
 }
 
+function setDaisyAdapterEnabled(enabled: boolean) {
+ const existing = document.getElementById(DAISY_ADAPTER_STYLE_ID);
+ if (!enabled) {
+ existing?.remove();
+ return;
+ }
+ if (existing) return;
+ const link = document.createElement('link');
+ link.id = DAISY_ADAPTER_STYLE_ID;
+ link.rel = 'stylesheet';
+ link.href = DAISY_ADAPTER_HREF;
+ document.head.appendChild(link);
+}
+
 try {
  const saved = localStorage.getItem(CUSTOM_THEME_STORAGE_KEY);
  if (saved) applyCustomTheme(saved);
@@ -263,6 +284,19 @@ function Swatch({color, selected, onClick, label}: {
 
 /* ── Main component ───────────────────────────────────────── */
 export function ThemeCustomizer() {
+ const [styleEngine, setStyleEngine] = useState<StyleEngine>(() => {
+ try {
+ const saved = localStorage.getItem(STYLE_ENGINE_STORAGE_KEY);
+ return saved === 'daisyui' ? 'daisyui' : 'kinu';
+ } catch {}
+ return 'kinu';
+ });
+ const [daisyTheme, setDaisyTheme] = useState<string>(() => {
+ try {
+ return localStorage.getItem(DAISY_THEME_STORAGE_KEY) || 'night';
+ } catch {}
+ return 'night';
+ });
  const [settings, setSettings] = useState<ThemeSettings>(() => {
  try {
  const saved = localStorage.getItem(CUSTOM_THEME_STORAGE_KEY + '-settings');
@@ -271,6 +305,28 @@ export function ThemeCustomizer() {
  return {accentColor: 'blue', grayColor: 'slate', radius: 'medium', scaling: '100%'};
  });
 
+ useEffect(() => {
+ const usingDaisy = styleEngine === 'daisyui';
+ setDaisyAdapterEnabled(usingDaisy);
+ if (usingDaisy) {
+ document.documentElement.setAttribute('data-theme', daisyTheme);
+ applyCustomTheme('');
+ }
+ if (!usingDaisy) {
+ document.documentElement.removeAttribute('data-theme');
+ try {
+ const saved = localStorage.getItem(CUSTOM_THEME_STORAGE_KEY) || '';
+ applyCustomTheme(saved);
+ } catch {
+ applyCustomTheme('');
+ }
+ }
+ try {
+ localStorage.setItem(STYLE_ENGINE_STORAGE_KEY, styleEngine);
+ localStorage.setItem(DAISY_THEME_STORAGE_KEY, daisyTheme);
+ } catch {}
+ }, [styleEngine, daisyTheme]);
+
  // const handlePaste = () => {
  // const val = pasteRef.current?.value ?? '';
  // const parsed = parseThemeJSX(val);
@@ -284,6 +340,10 @@ export function ThemeCustomizer() {
  // };
 
  const handleApply = () => {
+ if (styleEngine === 'daisyui') {
+ toast.show(`daisyUI theme: ${daisyTheme}`);
+ return;
+ }
  const css = generateCSS(settings);
  try {
  localStorage.setItem(CUSTOM_THEME_STORAGE_KEY, css);
@@ -294,6 +354,11 @@ export function ThemeCustomizer() {
  };
 
  const handleClear = () => {
+ if (styleEngine === 'daisyui') {
+ setDaisyTheme('night');
+ toast.show('daisyUI theme reset to night');
+ return;
+ }
  try {
  localStorage.removeItem(CUSTOM_THEME_STORAGE_KEY);
  localStorage.removeItem(CUSTOM_THEME_STORAGE_KEY + '-settings');
@@ -327,6 +392,55 @@ export function ThemeCustomizer() {
  </Dialog.Close>
  </div>
 
+ {/* Accent color */}
+ <div style={{display: 'flex', flexDirection: 'column', gap: '0.5rem'}}>
+ <Label>Style Engine</Label>
+ <div style={{display: 'flex', gap: '0.375rem', flexWrap: 'wrap'}}>
+ <Button
+ size="sm"
+ variant={styleEngine === 'kinu' ? null : 'outline'}
+ onClick={() => setStyleEngine('kinu')}
+ >
+ Kinu defaults
+ </Button>
+ <Button
+ size="sm"
+ variant={styleEngine === 'daisyui' ? null : 'outline'}
+ onClick={() => setStyleEngine('daisyui')}
+ >
+ DaisyUI adapter
+ </Button>
+ </div>
+ {styleEngine === 'daisyui' && (
+ <div style={{display: 'flex', flexDirection: 'column', gap: '0.375rem'}}>
+ <Label>
+ Daisy theme: <strong>{daisyTheme}</strong>
+ </Label>
+ <div style={{display: 'flex', gap: '0.375rem', flexWrap: 'wrap'}}>
+ {DAISY_THEMES.map((themeName) => (
+ <Button
+ key={themeName}
+ size="sm"
+ variant={daisyTheme === themeName ? null : 'outline'}
+ onClick={() => setDaisyTheme(themeName)}
+ >
+ {themeName}
+ </Button>
+ ))}
+ </div>
+ </div>
+ )}
+ </div>
+
+ <div
+ style={{
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '1rem',
+ opacity: styleEngine === 'daisyui' ? 0.55 : 1,
+ pointerEvents: styleEngine === 'daisyui' ? 'none' : 'auto',
+ }}
+ >
  {/* Accent color */}
  <div style={{display: 'flex', flexDirection: 'column', gap: '0.5rem'}}>
  <Label>
@@ -420,10 +534,19 @@ export function ThemeCustomizer() {
  {generateCSS(settings)}
  </pre>
  </Collapsible>
+ </div>
 
  {/* Actions */}
  <div style="display:flex; gap:0.5rem; justifyContent:flex-end;">
- <Button variant="outline" command="--toggle" commandFor="theme-css" style="margin-right:auto;">Generated CSS</Button>
+ <Button
+ variant="outline"
+ command="--toggle"
+ commandFor="theme-css"
+ style="margin-right:auto;"
+ disabled={styleEngine === 'daisyui'}
+ >
+ Generated CSS
+ </Button>
  <Button variant="outline" onClick={handleClear}>
  Reset
  </Button>

diff --git a/How To Find Pin On Bank Of America Card b/How To Find Pin On Bank Of America Card
@@ -65,3 +65,16 @@ Animation curves live in `--k-ease` and related tokens. Adjust them globally or
 
 When you need reduced motion support, respect the `prefers-reduced-motion` media query and reduce durations or disable
 animations in your overrides.
+
+## daisyUI Adapter (Tailwind-free)
+
+Kinu ships a daisyUI adapter stylesheet at `kinu/themes/daisyui.css`. Import it after `kinu/style.css`:
+
+```ts
+import 'kinu/style.css';
+import 'kinu/themes/daisyui.css';
+```
+
+The adapter is authored against real daisyUI component classes (`btn`, `input`, `textarea`, `select`, `badge`, `alert`, `progress`, `tabs`, etc.) and compiled during Kinu's build with Tailwind + daisyUI. The published `kinu/themes/daisyui.css` is already processed, so consumers do **not** need Tailwind or `@apply` in their app.
+
+Set `[data-theme]` (for example `night`, `cupcake`, `business`) and Kinu components will pick up daisyUI's generated theme values/styles through the adapter selectors.
diff --git a/Project Proposal Template Free Download b/Project Proposal Template Free Download
@@ -17,13 +17,14 @@
  "source": "./src/index.ts",
  "default": "./dist/index.js"
  },
- "./style.css": "./dist/index.css"
+ "./style.css": "./dist/index.css",
+ "./themes/daisyui.css": "./dist/themes/daisyui.css"
  },
  "files": [
  "dist"
  ],
  "scripts": {
- "build": "vite build && tsc --noEmit false --outDir dist",
+ "build": "vite build && tsc --noEmit false --outDir dist && mkdir -p dist/themes && pnpm exec tailwindcss -i src/themes/daisyui.css -o dist/themes/daisyui.css --minify",
  "build:demo": "cd demo && pnpm build",
  "lint": "tsc && biome lint",
  "dev": "vite build --watch",
@@ -40,10 +41,13 @@
  "@biomejs/biome": "^1.9.4",
  "@changesets/cli": "^2.29.8",
  "@preact/preset-vite": "^2.10.1",
+ "@tailwindcss/cli": "^4.2.2",
  "@types/node": "^22.15.30",
+ "daisyui": "^5.5.19",
  "preact": "^10.26.9",
  "preact-forwardref": "^0.2.0",
  "preact-render-to-string": "^6.5.11",
+ "tailwindcss": "^4.2.2",
  "typescript": "^5.8.3",
  "vite": "^6.3.5",
  "vitest": "^3.0.6"