piruicy
The collection

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.