JGuang
中

Dock

Dock · daisyUI

Preview
npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47

Dock

Give destinations names, valid targets and current-page state. Reserve bottom content space and safe-area insets. Visual selection does not update routing or implement the tabs keyboard model.

Installation and initialization

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47

This is a native CSS plugin, not a React component import. Build Tailwind 4 with the daisyUI plugin and load the generated stylesheet before copying an example. See the included setup guide; do not override an existing project's React or Tailwind versions blindly.

@import "tailwindcss";
@plugin "daisyui" { themes: light --default, dark --prefersdark; }

Source and executable behavior

Source files preserve the original code fences, including original comments and demo strings. The $$ class prefix placeholder must be resolved for your plugin configuration: without a prefix, $$btn becomes btn. Copy every listed source file for the chosen example, combine HTML/CSS/JS appropriately and implement native events. The preview's reviewed event adapters are not a backend or an automatically installed application runtime.

Complete first example

<div class="$$dock">
  <button>
    <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
    <span class="$$dock-label">Home</span>
  </button>
  
  <button class="$$dock-active">
    <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="3 14 9 14 9 17 15 17 15 14 21 14" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><rect x="3" y="3" width="18" height="18" rx="2" ry="2" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></rect></g></svg>
    <span class="$$dock-label">Inbox</span>
  </button>
  
  <button>
    <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><path d="m22,13.25v-2.5l-2.318-.966c-.167-.581-.395-1.135-.682-1.654l.954-2.318-1.768-1.768-2.318.954c-.518-.287-1.073-.515-1.654-.682l-.966-2.318h-2.5l-.966,2.318c-.581.167-1.135.395-1.654.682l-2.318-.954-1.768,1.768.954,2.318c-.287.518-.515,1.073-.682,1.654l-2.318.966v2.5l2.318.966c.167.581.395,1.135.682,1.654l-.954,2.318,1.768,1.768,2.318-.954c.518.287,1.073.515,1.654.682l.966,2.318h2.5l.966-2.318c.581-.167,1.135-.395,1.654-.682l2.318.954,1.768-1.768-.954-2.318c.287-.518.515-1.073.682-1.654l2.318-.966Z" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path></g></svg>
    <span class="$$dock-label">Settings</span>
  </button>
</div>

All runnable examples

Dock

dock-1

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/dock/block-0.html

Dock Extra Small size

dock-2

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/dock/block-1.html

Dock Small size

dock-3

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/dock/block-2.html

Dock Medium size

dock-4

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/dock/block-3.html

Dock Large size

dock-5

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/dock/block-4.html

Dock Extra Large size

dock-6

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/dock/block-5.html

Dock with custom colors

dock-7

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/dock/block-6.html

Theme, accessibility and verification

Use native data-theme boundaries. Verify keyboard operation, labels, visible focus, disabled/invalid states where applicable, light/dark, mobile and reduced motion. Check your target browser's dialog, popover and CSS feature support. CSS classes do not supply unimplemented JavaScript or business services. Clean up timers and third-party instances; copying a command is not installation success.

Source and license

https://github.com/saadeghi/daisyui/tree/c51f50130ffefb293179e6fce8de7ad3f307e45f

JGuang authors these bilingual practical notes; this is not a claim of translating the complete upstream documentation. Original Markdown, code and CSS remain available in the source viewer. Preserve MIT and separate dependency notices. All native-package notices are included conservatively, including build tools; no build binary or remote demo image is redistributed. Replace remote media with assets you are authorized to use. Commercial templates are outside this integration.