Skip to content
jezuiMake it yours
← Components

Animated Tabs Indicator

Animated Tabs Indicator brings controlled expression to your interface.

Open ↗

Make it yours.

Install the editable source and its dependencies into your React + Tailwind project.

Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/animated-tabs-indicator.json

Use it

Scroll horizontally for long lines
"use client";
import {AnimatedTabsIndicator} from '@/components/jez-ui/ui/animated-tabs-indicator';

export default function Example(){
const tabs=[{value:'design',label:'Design',content:'Make it feel like something.'},{value:'build',label:'Build',content:'Give a good idea a useful shape.'},{value:'share',label:'Share',content:'Put it into the world.'}];
return <><AnimatedTabsIndicator items={tabs}/></>;
}

Props & types

Scroll horizontally for long lines
{
  items: { value: string; label: string; content: React.ReactNode }[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  className?: string;
}

Source

View 3 source files

registry/ui/animated-tabs-indicator.tsx

Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "./utils";
import { motion, useReducedMotion } from "motion/react";
import { Tabs as P } from "radix-ui";
import { useControllable } from "./use-controllable";
export function AnimatedTabsIndicator({
  items,
  value,
  defaultValue,
  onValueChange,
  className,
}: {
  items: { value: string; label: string; content: React.ReactNode }[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  className?: string;
}) {
  const [selected, setSelected] = useControllable(
    value,
    defaultValue ?? items[0]?.value,
    onValueChange,
  );
  const id = React.useId();
  const reduce = useReducedMotion();
  return (
    <P.Root
      value={selected}
      onValueChange={setSelected}
      className={cn("", className)}
    >
      <P.List className="flex gap-1 rounded-xl bg-muted p-1">
        {items.map((i) => (
          <P.Trigger
            key={i.value}
            value={i.value}
            className="relative flex-1 rounded-lg px-3 py-2 text-sm"
          >
            {selected === i.value && (
              <motion.span
                layoutId={id}
                transition={{ duration: reduce ? 0 : 0.25 }}
                className="absolute inset-0 rounded-lg bg-background"
              />
            )}
            <span className="relative">{i.label}</span>
          </P.Trigger>
        ))}
      </P.List>
      {items.map((i) => (
        <P.Content key={i.value} value={i.value} className="py-5">
          {i.content}
        </P.Content>
      ))}
    </P.Root>
  );
}

registry/ui/utils.ts

Scroll horizontally for long lines
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
  return twMerge(clsx(values));
}

registry/ui/use-controllable.ts

Scroll horizontally for long lines
"use client";
import { useState } from "react";
export function useControllable<T>(
  value: T | undefined,
  initial: T,
  onChange?: (value: T) => void,
) {
  const [local, setLocal] = useState(initial);
  return [
    value === undefined ? local : value,
    (next: T) => {
      if (value === undefined) setLocal(next);
      onChange?.(next);
    },
  ] as const;
}

Dependencies

motion@13.2.0 · radix-ui@1.6.7 · clsx@2.1.1 · tailwind-merge@3.5.0

Accessibility & behaviour

Respect reduced-motion preferences. Decorative effects must not carry essential information. WebGL scenes include a static fallback and only render while visible.

Read the accessibility and performance guide →