Element•Premium

Sliding Tabs

Accessible tabs with a springy sliding indicator, hover highlight, icons, count badges, pill or underline variants, and full keyboard support.

Analytics

Traffic is up compared with last week across every channel.

Visitors: 48.2k
Conversion: 4.6%
Revenue: $12.4k

Customize

VariantSizeAccent colorFull widthShow icons

Overview

About the Sliding Tabs

Accessible tabs with a springy sliding indicator, hover highlight, icons, count badges, pill or underline variants, and full keyboard support. It is delivered as editable TypeScript for React. Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

Dashboards and settings pages switching between related views.
Pricing toggles, filters, and segmented controls that need a polished active state.

What’s included

Files in the product ZIP

Sliding Tabs source

components/sliding-tabs.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import

import { SlidingTabs } from "@/components/sliding-tabs";

Minimum example

export default function SectionTabs() {
  return (
    <SlidingTabs
      items={[
        { value: "overview", label: "Overview" },
        { value: "activity", label: "Activity", badge: 3 },
      ]}
      onValueChange={(value) => console.log(value)}
    />
  );
}

Props

Component API

Prop	Type	Default	Description
items	SlidingTabItem[]	—	Tabs with value, label, and optional icon, badge, and disabled.
value	string	—	Controlled selected value.
defaultValue	string	items[0].value	Initial selection when uncontrolled.
onValueChange	(value: string) => void	—	Called when the selection changes.
variant	"pill" \| "underline"	"pill"	Indicator style.
size	"sm" \| "md"	"md"	Tab height and text size.
fullWidth	boolean	false	Stretch tabs to fill the container.
accent	string	"#a78bfa"	Focus ring, badge, and underline color.
id	string	—	Prefix for tab and panel ids.
className	string	""	Additional root class names.

When id is set, tabs get id={`${id}-tab-${value}`} and aria-controls={`${id}-panel-${value}`} so you can label your panels.

Compatibility

Verified project setup

ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source.

Images: No image files are included or required by the packaged component.
Fonts: No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Sliding Tabs ZIP, place the source file at src/components/sliding-tabs.tsx, and copy the example into your own page or feature folder.

Target path

src/components/sliding-tabs.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

Tailwind CSS is not required by this component.
All component styles are embedded in components/sliding-tabs.tsx.