Indicator

1. Install.

   pnpmnpmyarnbun

   pnpm add @fluidkit/indicator

2. Add the indicator to the container, absolutely positioned and behind the items. The container needs its own positioning and stacking context (isolation: isolate, or glass, which already has one), so an indicator with z-index: -1 sits above the container’s background and below the items. Style it however you like; the script only positions it.

   <div class="menu" role="menu">
     <span class="menu__highlight" aria-hidden="true"></span>
     <button type="button" role="menuitem">Add to Library</button>
     <button type="button" role="menuitem">Love</button>
     <hr />
     <button type="button" role="menuitem">Copy Link</button>
   </div>
   
   <style>
     .menu { position: relative; isolation: isolate; display: grid; padding: 8px; }
     .menu button { min-height: 44px; border-radius: 999px; }
     .menu__highlight {
       position: absolute;
       z-index: -1;
       background: color-mix(in srgb, currentColor 8%, transparent);
     }
     /* While the pointer is down on its item */
     .menu__highlight[data-pressed] {
       background: color-mix(in srgb, currentColor 14%, transparent);
     }
   </style>

3. Create the indicator once the elements are in the DOM. By default, the container’s children are the items, except the indicator itself and separators.

   import { createIndicator } from "@fluidkit/indicator";
   
   const highlight = createIndicator({
     container: document.querySelector(".menu")!,
     indicator: document.querySelector(".menu__highlight")!,
   });
   
   // On unmount:
   // highlight.destroy();

1. Install. The React components are included in the package (React 18+).

   pnpmnpmyarnbun

   pnpm add @fluidkit/indicator

2. Add the parts. The root is the container, the thumb is the element that moves, and each item has a value. The parts handle positioning and put the thumb behind the items; the look is up to you.

   import { Indicator } from "@fluidkit/indicator/react";
   
   export function Tabs() {
     const [tab, setTab] = useState("overview");
     return (
       <Indicator.Root value={tab} onValueChange={setTab} trigger="press" className="tabs">
         <Indicator.Thumb className="tabs__thumb" />
         <Indicator.Item value="overview">Overview</Indicator.Item>
         <Indicator.Item value="releases">Releases</Indicator.Item>
       </Indicator.Root>
     );
   }

   .tabs { isolation: isolate; display: flex; padding: 3px; border-radius: 999px; }
   .tabs__thumb { background: #fff; }
   /* The selected tab, and the one under the thumb */
   .tabs [data-selected] { font-weight: 600; }

   Components are marked "use client". On the server they render plain markup.

1. Install. The Vue components are included in the package (Vue 3.5+).

   pnpmnpmyarnbun

   pnpm add @fluidkit/indicator

2. Add the parts. The root is the container, the thumb is the element that moves, and each item has a value. v-model holds the selected item. The parts handle positioning and put the thumb behind the items; the look is up to you.

   <script setup lang="ts">
   import { ref } from "vue";
   import { Indicator } from "@fluidkit/indicator/vue";
   
   const tab = ref("overview");
   </script>
   
   <template>
     <Indicator.Root v-model="tab" trigger="press" class="tabs">
       <Indicator.Thumb class="tabs__thumb" />
       <Indicator.Item value="overview">Overview</Indicator.Item>
       <Indicator.Item value="releases">Releases</Indicator.Item>
     </Indicator.Root>
   </template>

   .tabs { isolation: isolate; display: flex; padding: 3px; border-radius: 999px; }
   .tabs__thumb { background: #fff; }
   /* The selected tab, and the one under the thumb */
   .tabs [data-selected] { font-weight: 600; }

   On the server, including Nuxt, the components render plain markup.

1. Install. The Svelte components are included in the package (Svelte 5.29+).

   pnpmnpmyarnbun

   pnpm add @fluidkit/indicator

2. Add the parts. The root is the container, the thumb is the element that moves, and each item has a value. bind:value holds the selected item. The parts handle positioning and put the thumb behind the items; the look is up to you.

   <script lang="ts">
     import { Indicator } from "@fluidkit/indicator/svelte";
   
     let tab = $state("overview");
   </script>
   
   <Indicator.Root bind:value={tab} trigger="press" class="tabs">
     <Indicator.Thumb class="tabs__thumb" />
     <Indicator.Item value="overview">Overview</Indicator.Item>
     <Indicator.Item value="releases">Releases</Indicator.Item>
   </Indicator.Root>

   .tabs { isolation: isolate; display: flex; padding: 3px; border-radius: 999px; }
   .tabs__thumb { background: #fff; }
   /* The selected tab, and the one under the thumb */
   .tabs [data-selected] { font-weight: 600; }

   Put these styles in a global stylesheet or wrap them in :global(): a component’s scoped styles don’t reach the elements the parts render. On the server, including SvelteKit, the components render plain markup.

Indicator.Root props:

Controlled. Pass value and onValueChange to keep the selection in your state. Clicks then only call onValueChange.

Nesting. A root only tracks its own items, not those of a nested root, so a menu with its own indicator can sit inside tabs with another.

Changing props never recreates the indicator; a new trigger applies immediately. Callbacks always see the latest values.

Every part also takes as-child, see Composition.

Indicator.Root props and events:

Controlled. With v-model, clicks update your ref. To accept or refuse a change yourself, pass :model-value and handle @update:model-value.

Nesting. A root only tracks its own items, not those of a nested root, so a menu with its own indicator can sit inside tabs with another.

Changing props never recreates the indicator; a new trigger applies immediately.

Every part also takes a child snippet, see Composition.

Indicator.Root props:

Controlled. With bind:value, clicks update your state. To accept or refuse a change yourself, bind a getter and a setter: bind:value={() => tab, (next) => allowed(next) && (tab = next)}.

Nesting. A root only tracks its own items, not those of a nested root, so a menu with its own indicator can sit inside tabs with another.

Changing props never recreates the indicator; a new trigger applies immediately.

Render as your own element. Every part accepts render, as in Base UI: pass an element and our props are merged into it, or a function that receives the props and state ({ selected, active } for items).

<Indicator.Item value="inbox" render={<a href="/inbox" />}>Inbox</Indicator.Item>
<Indicator.Item value="sent" render={(props, { selected }) => <Tab {...props} bold={selected} />} />

With Lift. In a Lift menu, pass the item under the finger as active, and use render to make each lift item an indicator item too.

Render as your own element. Every part accepts as-child, as in Reka UI: instead of its own element, the part renders the first element in its slot, with our attributes, classes, styles, listeners and refs merged in. The slot also receives the part’s state ({ selected, active } for items).

<Indicator.Item value="inbox" as-child>
  <RouterLink to="/inbox">Inbox</RouterLink>
</Indicator.Item>
<Indicator.Item v-slot="{ selected }" value="sent">
  <b v-if="selected">Sent</b><template v-else>Sent</template>
</Indicator.Item>

With Lift. In a Lift menu, pass the item under the finger as active, and use as-child to make each lift item an indicator item too.

Render as your own element. Every part accepts a child snippet, as in bits-ui: instead of its own element, the part renders yours. Spread the props it gives onto your element: they carry our attributes, handlers and the attachment that connects it. The snippet also receives the part’s state ({ selected, active } for items).

<Indicator.Item value="inbox">
  {#snippet child({ props })}<a {...props} href="/inbox">Inbox</a>{/snippet}
</Indicator.Item>
<Indicator.Item value="sent">
  {#snippet child({ props, selected })}<button {...props}>{#if selected}<b>Sent</b>{:else}Sent{/if}</button>{/snippet}
</Indicator.Item>

With Lift. In a Lift menu, pass the item under the finger as active, and use a child snippet to make each lift item an indicator item too.

Use useIndicator(options) when the parts don’t fit your markup. It takes the same options as Indicator.Root and returns refs.

import { useIndicator } from "@fluidkit/indicator/react";

const nav = useIndicator({ value: page, onValueChange: setPage });

<nav ref={nav.container} className="tabs">
  <span ref={nav.indicator} className="thumb" />
  <a ref={nav.item("home")} href="/">Home</a>
  <a ref={nav.item("docs")} href="/docs">Docs</a>
</nav>

With the hook, styling is up to you: position the container, and make the indicator absolute and behind the items, as described in How it works. The parts do this for you.

Use useIndicator(options) when the parts don’t fit your markup. Options can be an object, a ref or a getter; a getter is read again when what it uses changes. It returns function refs for :ref.

<script setup lang="ts">
import { useIndicator } from "@fluidkit/indicator/vue";

const page = ref("home");
const nav = useIndicator(() => ({ value: page.value, onValueChange: (v) => (page.value = v) }));
</script>

<template>
  <nav :ref="nav.container" class="tabs">
    <span :ref="nav.indicator" class="thumb" />
    <a :ref="nav.item('home')" href="/">Home</a>
    <a :ref="nav.item('docs')" href="/docs">Docs</a>
  </nav>
</template>

With the composable, styling is up to you: position the container, and make the indicator absolute and behind the items, as described in How it works. The parts do this for you.

Use useIndicator(() => options) when the parts don’t fit your markup. Call it in a component’s script; the options getter is read again when what it uses changes. It returns attachments for {@attach}, and state you read like any other.

<script lang="ts">
  import { useIndicator } from "@fluidkit/indicator/svelte";

  let page = $state("home");
  const nav = useIndicator(() => ({ value: page, onValueChange: (v) => (page = v) }));
</script>

<nav {@attach nav.container} class="tabs">
  <span {@attach nav.indicator} class="thumb"></span>
  <a {@attach nav.item("home")} href="/">Home</a>
  <a {@attach nav.item("docs")} href="/docs">Docs</a>
</nav>

With the function, styling is up to you: position the container, and make the indicator absolute and behind the items, as described in How it works. The parts do this for you.