# Velocity Tabs — Skecher UI

An accessible tab selector with a spring-driven indicator that stretches and softens in response to movement velocity.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/velocity-tabs
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { useState } from "react";

import { VelocityTabs } from "@/components/ui/velocity-tabs";

const tabs = [
  { value: "overview", label: "Overview" },
  { value: "activity", label: "Activity" },
  { value: "settings", label: "Settings" },
] as const;

export default function VelocityTabsExample() {
  const [value, setValue] = useState("overview");

  return (
    <VelocityTabs
      aria-label="Workspace sections"
      tabs={tabs}
      value={value}
      onValueChange={setValue}
    />
  );
}
```

## Source files

- components/ui-components/velocity-tabs.tsx — Velocity Tabs component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/velocity-tabs
- Registry item with complete source: https://skecher-ui.com/r/velocity-tabs.json
- Component AI context: https://skecher-ui.com/llms/velocity-tabs