slidytabs

A DOM-level utility for animating shadcn <Tabs />

Works with shadcn, shadcn-svelte, and shadcn-vue.

Examples/demo at https://slidytabs.dev

Why this exists

• tabs(): shadcn <Tabs /> jump between positions, which can feel abrupt in motion-oriented UIs. A solution should work with Tabs as-is, not as a wrapper or replacement.

• slider() / range(): Sometimes you want the semantics of a radio button or select, with the linearity and tactility of a slider. This comes up often when selecting from small, discrete sets where sliders feel almost right, but slightly wrong. Think clothing sizes, days of the week, months, tip amounts, or school grades. See this UX StackExchange discussion.

Install

npm i slidytabs

Quick start

tabs() adds a sliding animation where value updates would normally be “jumpy”. Use slider() or range() instead, for additional functionality. tabs(), slider(), and range() each return a setup function, automatically called by your framework.

React

import { tabs } from "slidytabs";
import { Tabs } from "@/components/ui/tabs";

<Tabs ref={tabs()}>
  …
</Tabs>;

What’s a ref callback?

Svelte

<script lang="ts">
  import { tabs } from "slidytabs";
  import * as Tabs from "$lib/components/ui/tabs/index.js";
</script>

<Tabs.Root {@attach tabs()}>
  …
</Tabs>

What’s an attachment?

Vue

<script setup lang="ts">
import { tabs } from "slidytabs";
import { Tabs } from "@/components/ui/tabs";
</script>

<Tabs :ref="tabs()">
  …
</Tabs>

What’s a ref callback?

Usage

import { tabs, slider, range } from "slidytabs";

Make tabs slide with tabs()

value is a single index. tabs() works uncontrolled, or can be controlled via shadcn’s value/onValueChange props or via slidytabs’ index-based props.

tabs(options?: {
  value?: number;
  onValueChange?: (value: number) => void;
});

Make tabs a slider with slider()

Same as tabs(), with a draggable tab.

sticky: number appears visually as a range slider, with one fixed endpoint. sticky is not compatible with shadcn control props.

slider(options?: {
  value?: number;
  onValueChange?: (value: number) => void;
  sticky?: number;
});

Make tabs a range slider with range()

value is a pair of indices [start, end]. Not compatible with shadcn control props.

push: boolean lets one endpoint push the other.

range(options?: {
  value: [number, number];
  onValueChange?: (value: [number, number]) => void;
  push?: boolean;
});

Bugs

Getting this to work requires some document.styleSheets acrobatics, and this is an early release, so edge cases likely exist.

Please open issues, especially if your Tabs component works as expected without slidytabs, but behaves unexpectedly once slidytabs is applied.