Glide Tabs

An animated tab group component for React.

Installation

npm install glide-tabs motion

Usage

import { TabGroup, Tab } from 'glide-tabs';
import 'glide-tabs/styles.css';

function App() {
  const [active, setActive] = useState('overview');

  return (
    <TabGroup value={active} onChange={setActive}>
      <Tab value="overview">Overview</Tab>
      <Tab value="features">Features</Tab>
      <Tab value="pricing">Pricing</Tab>
    </TabGroup>
  );
}

Variants

Switch between pill and underline styles.

Scrollable

Set a maxWidth to enable horizontal scrolling when tabs overflow.

Scroll horizontally to see more tabs

API

`<TabGroup>`

Prop	Type	Default	Description
`value`	`string`	—	Active tab value (controlled)
`onChange`	`(value: string) => void`	—	Called when a tab is clicked
`variant`	`"pill" \| "underline"`	`"pill"`	Visual style of the indicator
`maxWidth`	`number \| string`	—	Max width before scrolling
`className`	`string`	—	Custom class on the container
`style`	`CSSProperties`	—	Inline style overrides

`<Tab>`

Prop	Type	Default	Description
`value`	`string`	—	Unique tab identifier
`disabled`	`boolean`	`false`	Disables the tab
`className`	`string`	—	Custom class on the tab button
`children`	`ReactNode`	—	Tab label content