Color Palette

Semantic colors adapt to the current theme. Toggle dark/light to see them change.

Base colors

Typography

Buttons

Variants

Sizes

Shapes

States

Cards

Forms

Badges & Alerts

Badges

Alerts

Tabs

Collapse / Accordion

Tooltips

Dropdowns

Progress & Loading

Progress bars

Loading indicators

Keyboard

Steps

• Install
• Configure
• Build
• Deploy

Skeleton

Swap

Theme System

The theme uses a cookie-based system scoped to .dhanur.me, so all subdomains share the same dark/light preference.

Brightness variants

The darker brightness gives pure black (#000000) backgrounds. lighter gives a softer dark mode.

Reading/setting theme in JS

// Read current theme from cookie
var theme = document.cookie.match(/theme=([^;]*)/)?.[1] || "dark";

// Set theme (if on dhanur.me or subdomain)
window.__setThemeCookie("light"); // or "dark"

// Or manually
document.cookie =
  "theme=dark; path=/; domain=.dhanur.me; max-age=31536000; SameSite=Lax";

Integration Guide

Minimal setup (just the script)

<script src="https://dhanur.me/js/shell.js" defer></script>

This auto-injects main.css + font-awesome.min.css, fetches the layout shell, wraps your page content in the drawer, and handles theming.

Script tag attributes

SiteNavConfig API

Set window.SiteNavConfig before the script loads to configure navigation, branding, and chrome visibility.

window.SiteNavConfig = {
  // Layout mode
  // "full" (default) = drawer + sidebar + navbar
  // "navbar" = fixed top bar only, no sidebar (for SPAs)
  mode: "full",

  // Navigation - replace nav items in header + sidebar.
  // null = use dhanur.me's nav as-is.
  nav: [
    { name: "Docs", url: "/docs/", icon: "fa-solid fa-book" },
    { name: "API", url: "/api/", icon: "fa-solid fa-code" },
    // Dropdown (header only):
    {
      name: "Links",
      type: "dropdown",
      icon: "fa-solid fa-link",
      members: [
        {
          name: "GitHub",
          url: "https://github.com/...",
          icon: "fa-brands fa-github",
        },
      ],
    },
  ],

  // Separate sidebar nav (optional). If null, uses `nav`.
  sidebarNav: [
    {
      name: "Getting Started",
      url: "/docs/start/",
      icon: "fa-solid fa-rocket",
      children: [
        { name: "Installation", url: "/docs/start/install/" },
        { name: "Quick Start", url: "/docs/start/quickstart/" },
      ],
    },
  ],

  // Highlight current page in sidebar. Default: location.pathname.
  activePath: null,

  // Branding overrides
  logo: {
    href: "/",                         // where logo links to
    html: "<img src='/logo.png' class='h-8'>",  // raw HTML content
  },
  favicon: "/path/to/icon.png",        // override favicon
  badge: {
    text: "BETA",                      // text shown in badge
    class: "badge-warning",            // DaisyUI badge class
  },

  // Chrome visibility
  showSearch: false,      // default: false (subdomains can't use main site search)
  showAppsGrid: true,     // default: true
  showThemeToggle: true,  // default: true
};

Config options

Nav item shapes

Example Configurations

Subdomain with custom nav + badge

<script>
  window.SiteNavConfig = {
    nav: [
      { name: "Dashboard", url: "/", icon: "fa-solid fa-gauge" },
      { name: "Users", url: "/users/", icon: "fa-solid fa-users" },
      { name: "Settings", url: "/settings/", icon: "fa-solid fa-gear" },
    ],
    badge: { text: "ADMIN", class: "badge-error" },
    favicon: "/admin-icon.png",
  };
</script>
<script src="https://dhanur.me/js/shell.js" defer></script>

React SPA (navbar only)

<!-- In public/index.html -->
<script>
  window.SiteNavConfig = {
    mode: "navbar",
    nav: [
      { name: "Home", url: "/", icon: "fa-solid fa-house" },
      { name: "About", url: "/about", icon: "fa-solid fa-user" },
    ],
    logo: { href: "/", html: "<span class='text-lg font-bold'>MyApp</span>" },
    showAppsGrid: false,
  };
</script>
<script src="https://dhanur.me/js/shell.js" defer></script>

Documentation site with nested sidebar

<script>
  window.SiteNavConfig = {
    nav: [
      { name: "Docs", url: "/docs/", icon: "fa-solid fa-book" },
      { name: "API", url: "/api/", icon: "fa-solid fa-code" },
    ],
    sidebarNav: [
      {
        name: "Getting Started",
        url: "/docs/start/",
        icon: "fa-solid fa-rocket",
        children: [
          { name: "Installation", url: "/docs/start/install/" },
          { name: "Quick Start", url: "/docs/start/quickstart/" },
        ],
      },
      {
        name: "Guides",
        url: "/docs/guides/",
        icon: "fa-solid fa-map",
        children: [
          { name: "Authentication", url: "/docs/guides/auth/" },
          { name: "Deployment", url: "/docs/guides/deploy/" },
        ],
      },
    ],
    badge: { text: "DOCS", class: "badge-info" },
  };
</script>
<script src="https://dhanur.me/js/shell.js" defer></script>

No config (uses dhanur.me's nav)

<!-- Simplest possible usage — zero config -->
<script src="https://dhanur.me/js/shell.js" defer></script>

Notes

• Logo defaults to ~/dhanur linking to dhanur.me — override with logo: { href, html }
• Favicon defaults to main site — override with favicon: "/path/to/icon.png"
• Theme cookie is shared across all *.dhanur.me subdomains
• CSS (compiled Tailwind + DaisyUI) is auto-injected unless data-no-css is set on the script tag
• Search is off by default on subdomains (needs main site search index)
• The layout shell is fetched from /navbar/ on the main site — any template changes propagate automatically
• Font Awesome 6 icons are available via the auto-injected CSS