Accessible animated tabs in React and Tailwind, with no library and no measuring

Tabs with a sliding pill, full ARIA roles and arrow-key navigation, in one client component and no dependency. This page is the code side: equal-width tabs whose pill moves by its own width, so the server HTML already has it in place, a ?tab= link that survives a reload, and the Week/Month segmented control that should not be a tab at all.

One payment$9

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

The Tabs component

components/tabs.tsx

"use client";
import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react";

export type TabItem = { id: string; label: string; content: ReactNode };

type TabsProps = { items: TabItem[]; label: string; defaultId?: string; onChange?: (id: string) => void };

// Equal-width tabs: the pill moves by its own width per index, so nothing is
// measured and the server HTML already has it under the right tab.
export function Tabs({ items, label, defaultId, onChange }: TabsProps) {
  const base = useId();
  const [active, setActive] = useState(defaultId ?? items[0]?.id);
  const refs = useRef<(HTMLButtonElement | null)[]>([]);
  const index = Math.max(0, items.findIndex((t) => t.id === active));

  function pick(i: number, focus: boolean) {
    const next = (i + items.length) % items.length;
    const id = items[next]?.id;
    if (!id) return;
    setActive(id);
    onChange?.(id);
    if (focus) refs.current[next]?.focus();
  }

  function onKeyDown(e: KeyboardEvent<HTMLDivElement>) {
    if (e.key === "ArrowRight") pick(index + 1, true);
    else if (e.key === "ArrowLeft") pick(index - 1, true);
    else if (e.key === "Home") pick(0, true);
    else if (e.key === "End") pick(items.length - 1, true);
    else return;
    e.preventDefault();
  }

  return (
    <div>
      <div
        role="tablist"
        aria-label={label}
        onKeyDown={onKeyDown}
        className="relative grid rounded-xl border border-white/10 bg-white/5 p-1"
        style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }}
      >
        <span
          aria-hidden="true"
          className="absolute inset-y-1 left-1 rounded-lg bg-lime-300 transition-transform duration-300 ease-out motion-reduce:transition-none"
          style={{ width: `calc((100% - 0.5rem) / ${items.length})`, transform: `translateX(${index * 100}%)` }}
        />
        {items.map((t, i) => {
          const selected = i === index;
          return (
            <button
              key={t.id}
              ref={(el) => {
                refs.current[i] = el;
              }}
              id={`${base}-tab-${t.id}`}
              type="button"
              role="tab"
              aria-selected={selected}
              aria-controls={`${base}-panel-${t.id}`}
              tabIndex={selected ? 0 : -1}
              onClick={() => pick(i, false)}
              className={`relative z-10 truncate rounded-lg px-3 py-2 text-sm font-semibold transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-300 ${selected ? "text-zinc-950" : "text-zinc-400 hover:text-zinc-100"}`}
            >
              {t.label}
            </button>
          );
        })}
      </div>
      {items.map((t, i) => (
        <div
          key={t.id}
          id={`${base}-panel-${t.id}`}
          role="tabpanel"
          aria-labelledby={`${base}-tab-${t.id}`}
          tabIndex={0}
          hidden={i !== index}
          className="mt-4 rounded-xl focus-visible:outline-2 focus-visible:outline-lime-300"
        >
          {t.content}
        </div>
      ))}
    </div>
  );
}

Good to know

Only the active tab is in the tab order (tabIndex 0, the others -1). Tab moves focus into the list, the arrows move between tabs and wrap, Home and End jump to the ends, and the next Tab press leaves the list. That is the ARIA Authoring Practices tabs pattern with automatic activation.
The pill is one span behind equal-width grid columns, moved with translateX(index * 100%). Its width is the grid's width less the padding, divided by the tab count, so nothing is read from the DOM and nothing jumps when web fonts load. If your tabs need different widths, measure the active button instead; the blog post shows that version.
All panels stay in the DOM with the hidden attribute, so switching is instant and a half-filled form inside a panel keeps its values.
What we ran on October 27, 2026: every TypeScript file on this page type-checks with TypeScript 5.9.3 against @types/react 19, react 19.1.1 and next 15.5.28, in strict mode. Leaving a tab's label out and passing "year" to the range switch both fail the same check. We didn't run these exact files in a browser on this page; the keyboard behaviour follows the component from our blog post, which was.

Keep the tab in the URL

A shared link or a reload should open the same tab. The page reads ?tab= on the server and passes it as defaultId, and UrlTabs writes the new value with history.replaceState, which Next.js keeps in sync with useSearchParams without a navigation or a server round trip.
Check the value against the ids you know before you use it, so a hand-edited link can't select a tab that doesn't exist.

components/url-tabs.tsx

"use client";
import { Tabs, type TabItem } from "./tabs";

// Keeps ?tab= in the address bar without a navigation, so a shared link or a
// reload opens the same tab. Next.js keeps useSearchParams in sync with replaceState.
export function UrlTabs({ items, label, defaultId }: { items: TabItem[]; label: string; defaultId?: string }) {
  return (
    <Tabs
      items={items}
      label={label}
      defaultId={defaultId}
      onChange={(id) => window.history.replaceState(null, "", `?tab=${encodeURIComponent(id)}`)}
    />
  );
}

app/settings/page.tsx (Server Component)

import { UrlTabs } from "@/components/url-tabs";

const ids = ["profile", "billing", "team"];

export default async function SettingsPage({ searchParams }: { searchParams: Promise<{ tab?: string }> }) {
  const { tab } = await searchParams;
  return (
    <main className="mx-auto max-w-xl p-6">
      <UrlTabs
        label="Account settings"
        defaultId={tab && ids.includes(tab) ? tab : "profile"}
        items={[
          { id: "profile", label: "Profile", content: <p>Your name and avatar.</p> },
          { id: "billing", label: "Billing", content: <p>Plan, invoices and card.</p> },
          { id: "team", label: "Team", content: <p>Invite people to your workspace.</p> },
        ]}
      />
    </main>
  );
}

Week / Month is not a tab

If the click changes the data in the same view instead of showing another panel, use toggle buttons with aria-pressed inside a role=group. Screen readers then say "Week, toggle button, pressed" instead of promising a panel that never appears.

components/range-switch.tsx

"use client";

export type Range = "week" | "month";

const OPTIONS: { value: Range; label: string }[] = [
  { value: "week", label: "Week" },
  { value: "month", label: "Month" },
];

// A filter is not a tab: it changes the same view, so it is a group of
// toggle buttons with aria-pressed, and arrow keys are not needed.
export function RangeSwitch({ value, onChange }: { value: Range; onChange: (next: Range) => void }) {
  const index = Math.max(0, OPTIONS.findIndex((o) => o.value === value));
  return (
    <div role="group" aria-label="Date range" className="relative grid grid-cols-2 rounded-xl border border-white/10 bg-white/5 p-1">
      <span
        aria-hidden="true"
        className="absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] rounded-lg bg-lime-300 transition-transform duration-300 ease-out motion-reduce:transition-none"
        style={{ transform: `translateX(${index * 100}%)` }}
      />
      {OPTIONS.map((o) => (
        <button
          key={o.value}
          type="button"
          aria-pressed={o.value === value}
          onClick={() => onChange(o.value)}
          className={`relative z-10 rounded-lg px-5 py-2 text-sm font-semibold transition-colors ${o.value === value ? "text-zinc-950" : "text-zinc-400 hover:text-zinc-100"}`}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
}

Where Analytics Dashboard V1 fits

Analytics Dashboard V1 has this exact Week/Month switch: a lime pill slides under the chosen range and every number on the dashboard counts to the new value. If you are building an analytics screen in Cursor, v0 or Lovable, it is the finished version of the RangeSwitch on this page, with the charts and KPIs around it.
If you only want free pieces with source first, the free kit is MIT.

The free kit: Toast Stack, Pricing Switch, Upload Dropzone and more, MIT

Install

Copy from the zipPut react/src/components into src/, then none. React 19 and Tailwind v4; Next.js App Router for the ?tab= part.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

data: your KPIs and series
title / subtitle: header text
startDelay: ms before the count-up

How qodesign compares

qodesign vs UiverseUiverse is best for: single small elements: buttons, loaders, toggles, checkboxes, inputs.
qodesign vs AnimataAnimata is best for: free animated building blocks you copy and adapt.
qodesign vs Motion PrimitivesMotion Primitives is best for: small motion building blocks you compose yourself: text effects, number tickers, dialogs, toolbars.

All comparisons, with prices read on each library's own site.

From the blog: Accessible Animated Tabs in React and Tailwind CSS Without a Library

From the blog: Animated Tabs with Framer Motion in Next.js App Router

Questions

Do I need Radix or Headless UI for accessible tabs?

No. Tabs need the tablist, tab and tabpanel roles, aria-selected, aria-controls, a roving tabIndex and arrow-key handling. That fits in one component, as on this page.

Should arrow keys switch the panel or only move focus?

When panels are already rendered, switch on focus (automatic activation). If a panel is slow to render, move focus only and switch on Enter or Space.

How do I keep the selected tab in the URL in Next.js?

Read ?tab= in the Server Component, pass it as the default, and write changes with window.history.replaceState. Next.js keeps useSearchParams in sync with it.

Tabs or a segmented control?

Tabs show a different panel. A segmented control, like Week and Month, filters the view you are already on, so it uses buttons with aria-pressed.

Does the dashboard work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.