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

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

Examples/demo at https://slidytabs.dev

• 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.

npm i slidytabs

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.

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

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

What’s a ref callback?

<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?

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

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

What’s a ref callback?

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

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;
});

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;
});

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;
});

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.