JGuang
中

Indicator

Indicator · daisyUI

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

Indicator

indicator-item positions content relative to its container; application code supplies status/counts. Check overflow, RTL alignment and focus occlusion; a positioned badge is not inherently an interactive control.

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="$$indicator">
  <span class="$$indicator-item $$status $$status-success"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

All runnable examples

Status Indicator

indicator-1

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

Badge as indicator

indicator-2

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

for button

indicator-3

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

for tab

indicator-4

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

for avatar

indicator-5

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

for an input

indicator-6

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

A button as an indicator for a card

indicator-7

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

in center of an image

indicator-8

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

indicator-top (default) indicator-start

indicator-9

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

indicator-top (default) indicator-center

indicator-10

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

indicator-top (default) indicator-end (default)

indicator-11

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

indicator-middle indicator-start

indicator-12

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

indicator-middle indicator-center

indicator-13

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

indicator-middle indicator-end (default)

indicator-14

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

indicator-bottom indicator-start

indicator-15

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

indicator-bottom indicator-center

indicator-16

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

indicator-bottom indicator-end (default)

indicator-17

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

multiple indicators

indicator-18

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

Responsive

indicator-19

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/indicator/block-18.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.