Clip-path tabs
after Emil Kowalski
Tabs whose highlight and text colour move as one, because the active style is a clipped copy of the list.
npx shadcn@latest add https://piruicy.com/r/clip-tabs.json
Details
- The list is drawn twice; the inked copy on top is clipped to the active tab, so background and text change together.
- The clip is an inset() in percentages, rounded to half the pill's height, and transitions over 250ms.
- A moving pill plus a separate colour change never lines up in slow motion; one clip cannot drift.
- Arrow keys, Home and End move the selection instantly: keyboard moves are never animated.
© 2026 Dhaval Khandhadia. Use it in anything you build; don’t resell it. MIT with the Commons Clause.