DaisyUI Docs Components

🧭 Context

• Location: daisyui/packages/docs/src/components
• Stack: SvelteKit + Svelte 5 runes, DaisyUI 5 + Tailwind 4, i18n store, theme-change.
• Purpose: Building blocks for the official daisyUI docs UI: shell (navbar/sidebar/footer), component previews, code tabs, search, theming, and marketing sections.

---

🧱 High-Level Architecture

Layer	Components (examples)	Responsibility
Shell	Navbar, Sidebar, AlternativeSidebar, Footer	Global layout, navigation, social links, marketing CTAs
Docs UX	Component, ComponentFooter, ComponentPageTabs	Component preview blocks, code tabs, pager, section tabs
Search	Search	Global fuzzy search, modal, recent/bookmarked results
Theming	ThemeChange, ThemePreviews	Theme dropdown, theme cards, data-theme + theme-change
SEO/i18n	SEO, LangChange, Translate	Meta tags, language switcher, translation helpers
Showcase	CompanyLogos, MediaLogos, Testimonials, StoreProduct	Social proof, products, testimonials
Color UI	ColorPalette, ColorPicker, ColorSlider	Interactive color/theming visuals
Homepage	homepage/ComponentsPreview, homepage/Install, Opensource	Landing sections built with DaisyUI primitives

All of these are ordinary Svelte components composed almost entirely from DaisyUI + Tailwind classes, plus a few SvelteKit/i18n/theme hooks.

---

🧩 Core Shell Components

🧭 Navbar.svelte

• Role: Top sticky navbar for docs + marketing pages.
• Key props (from $props()):
  • themes: list of available theme names, passed to ThemeChange.
  • hideLogoOnLargeScreen, hideSidebarButton, hideSidebarButtonOnLargeScreen.
  • showComponentsBtn, showSearch, showVersion, showLanguage.
  • version, scrollY = $bindable(), onOpenSearch, onPreFetchSearch, children.
• Patterns:
  • Uses $state/$bindable + <svelte:window bind:scrollY /> to derive switchNavbarStyle (drop shadow after scrollY>40).
  • Uses DaisyUI navbar, btn, tooltip, kbd, etc. for shell.
  • Delegates theme switching to <ThemeChange {themes} /> and language switching to <LangChange />.
  • Allows arbitrary center content via {@render children?.()}.
  • Uses SvelteKit goto for context-menu navigation to /brand and track() for analytics.

📚 Sidebar.svelte / AlternativeSidebar.svelte

• Sidebar.svelte

  • Props: closeDrawer, pages, drawerSidebarScrollY, version, onOpenSearch, onPreFetchSearch.
  • Uses $page store + innerWidth to:
    • Show sticky top bar + logo + changelog on large screens.
    • On <1024px: render a search input at top of drawer, wired to the same callbacks as Navbar.
  • Renders navigation tree via <SidebarMenuItem> over a pages AST (name, href, items, badges, etc.).
  • Bottom row is a horizontal menu of social/support links (GitHub, X, Discord, Donate).

• AlternativeSidebar.svelte

  • Right-rail ads + store promos.
  • Uses onMount to pick a weighted-random banner from bannerItems.
  • For dev env: shows placeholder Ads; otherwise renders <Carbon /> ad component.

🦶 Footer.svelte + ComponentFooter.svelte

• Footer.svelte (site footer)

  • Two main sections:
    • Big footer: logo, tagline, social icons, navigation columns (pages/frameworks/comparisons/related projects), llms.txt link.
    • Bottom strip: creator card, newsletter form, and small text.
  • Patterns: pure DaisyUI layout (footer, footer-title, link link-hover, btn, join).

• ComponentFooter.svelte (docs page pager + CTAs)

  • Prop: pages navigation tree; flattened via extractPages() into arrayOfPagesInOrder.
  • Uses $page.url.pathname to compute currentPageIndex and render Prev/Next buttons.
  • Adds keyboard shortcuts j/k (via onMount + document.addEventListener('keydown')) to navigate between docs pages.
  • Includes helper sections:
    • “Do you have a question?” → GitHub discussions / Discord.
    • “Do you see a bug?” → prefilled GitHub issues search.
    • “Do you like daisyUI?” → tweet link.
    • “Support daisyUI” → Open Collective.
    • “Edit this page on GitHub” + “Text version for AI prompts” links.
    • Translation contribution link when currentLang != defaultLang.
  • Ends with a marketing card for the Nexus dashboard.

---

📦 Component Preview System

🔍 Component.svelte

• Role: Core block for each component example in docs.
• Props:
  • title, desc, bg, classes, responsive.
  • children: the actual example markup.
  • html, jsx: Snippets to render inside code tabs.
  • uuid = crypto.randomUUID() to isolate tab radios.
• Behavior:
  • Computes a titleStr slug for id + deep-link anchor.
  • On mount: auto-scrolls to example if location.hash matches titleStr.
  • Subscribes to prefix store to update htmlContent / jsxContent when prefix changes.
  • Renders three tabs using DaisyUI tabs tabs-lift:
    • Preview: {@render children()} inside a .preview div using DaisyUI background + layout classes, optional responsive resize.
    • HTML: copies from {#snippet html()} into a code block + <Clipboard strip={true}> overlay.
    • JSX: same but piped through use:htmlToJsx + use:prefixClassNames actions.

📑 ComponentPageTabs.svelte

• Docs sub-navigation for a given component page.
• Static tabs array: Examples, Design spec, Accessibility.
• Uses $page.url.pathname segments to compute current tab and to build /components/[component]/[slug] links.
• UI: DaisyUI tabs tabs-lift lg:tabs-lg with an extra dummy <span class="tab" /> as flex filler.

---

🔍 Global Search (Search.svelte)

• Role: Command‑palette style global search with recent + bookmarked items.
• State:
  • searchData, searchQuery, isSearchLoading, selectedIndex.
  • recentSearches, bookmarkedSearches stored in localStorage.
• Data source:
  • Built-in CSV (initialSearchCSV) for critical entries.
  • External /search.csv fetched and parsed, with sections detected via #fragment in URLs.
  • Enriches each item with isSection + parentPageTitle.
• Ranking (see filteredResults):
  • Pages before sections.
  • Exact/partial title matches.
  • Section title vs page title.
  • Class name matches.
  • URL segment matches.
  • URL priority (components > docs > theme‑generator > store).
  • Shorter URLs and alpha title as tie-breakers.
• UI:
  • Global keyboard shortcuts: Cmd/Ctrl+K and / open the modal.
  • Patterns for searchResultItem snippet: supports action buttons (bookmark/delete) for recent/bookmarked.
  • Uses DaisyUI modal, input, btn, menu, icons.

---

🎨 Theme Management

🎛️ ThemeChange.svelte

• Wraps theme-change.
• On mount calls themeChange(false) to wire up data-set-theme/data-theme behavior.
• Props:
  • themes: list of theme names.
  • dropdownClasses, btnClasses, contentClasses for layout customization.
• UI:
  • DaisyUI dropdown dropdown-end, inner btn showing four colored dots (base, primary, secondary, accent).
  • Dropdown content: menu of theme buttons that:
    • Set data-set-theme={theme}.
    • Render a small theme preview card with data-theme={theme}.

🧪 ThemePreviews.svelte

• Grid of clickable theme cards.
• For each theme:
  • Outer div with data-set-theme + data-act-class="outline-base-content!".
  • Inner data-theme={theme} preview showing base/primary/secondary/accent/neutral blocks.
• Uses pure DaisyUI utility classes for layout and color.

---

🏠 Homepage Sections (components/homepage/*.svelte)

• ComponentsPreview.svelte – animated gallery of components, built with DaisyUI card, tabs, stats, etc.
• Install.svelte – quick‑start code blocks and install instructions.
• Opensource.svelte – section explaining licensing, stars, sponsors; heavy on card, badge, avatar.

These are compositional marketing sections using the same primitives; no special logic beyond layout, minor animations, and links.

---

🔧 Implementation Notes & Reuse Patterns

• Svelte 5 runes: Components use $props, $state, $derived, $effect, Snippet + {@render} across the board.
• DaisyUI‑first: Every layout is DaisyUI + Tailwind classes; almost zero custom CSS.
• Composition > inheritance: Navbar/Sidebar/Footer all accept children/props instead of hard-coding content.
• SvelteKit integration: Limited to goto, $page, and data-sveltekit-preload-data.
• Theme + i18n: Central stores (theme-change, i18n t, currentLang) keep logic thin in UI components.

---

🚀 How to Leverage for Your Own Implementation

1. Shell: Mirror Navbar, Sidebar, Footer structure in your app/Storybook UI to get a daisyui.com‑like docs shell.
2. Component previews: Reuse the Component.svelte pattern for any demo block that needs Preview / HTML / JSX tabs with copy buttons.
3. Search: Use Search.svelte as blueprint for a command‑palette search over your own /search.csv or route map.
4. Theming: Drop in ThemeChange + ThemePreviews to instantly support DaisyUI theme toggling.
5. Pager: Use ComponentFooter with your own navigation tree to get Prev/Next keyboard shortcuts + docs CTAs.

All of this is FOSS and self‑contained inside packages/docs/src, making it ideal as a reference implementation for any DaisyUI‑powered docs or design system.