design-infraReport a problem or share feedback← Catalog
Sliding Underline Tabs
curatedfreemicrokit/sliding-underline-tabs
A compact tab switcher with an orange underline that glides between labels.
$
npx shadcn@latest add https://microkit.co/r/sliding-underline-tabs.jsonOur notes
CSS-only: one bar translated under the active label (750ms ease-out) plus a 650ms keyframe nudge on the panel; motion-reduce handled. A prop-less demo — 3 hard-coded tabs, #f97316 bar, light-dark() hex greys, and the active label is text-white, which vanishes on a light background. Lift the technique onto your own tabs with bg-primary / text-foreground.- Source
- MicroKit
- Kind
- component
- Categories
- tabs
- Use as
- recipe — technique you apply to your own markup
- Applies to
- tabsnavigation
- Motion
- on state · subtle · css · low cost · respects reduced motion
- Tags
- css, click, hard-coded-colours
- Licence
- MIT ("MIT License — Copyright (c) 2026 Henrique Barone", github.com/henriquegpb/microkit). README credits note that some interactions are adapted from publicly shared examples and Webflow exports.
- Live demo
- microkit.co
- Docs
- microkit.co
Similar
Compare all 4 →- Expanding Icon Tabsmicrokit/expanding-icon-tabsIcon toolbar whose chosen item widens to show its label while siblings slide over; ←/→ move focus, Escape and outside-click collapse it, role=toolbar, motion-reduce handled. Good for compact app toolbars and view switchers. Hard-coded items and light-dark() hex colours — rebuild with your icons and tokens.
- Animated Tabssmoothui/animated-tabsTab list with a layoutId spring indicator in underline, pill or segment variants; arrow/Home/End keys and roving tabindex. Pill/segment use bg-muted + bg-background (theme). The underline uses bg-brand from SmoothUI's tokens.json (pink by default) — set --brand: var(--primary) once in globals.css. Tabs only: you render the panels (pair with motion-primitives/transition-panel).
- Sliding Content Tabsmicrokit/sliding-content-tabsA solid slab slides behind the active icon+label tab (translateX, 750ms ease-out). Despite the description the content swap is a keyed remount with no animation, and there is no reduced-motion guard. Hard-coded demo tabs and #f97316 slab — take the slab technique, use bg-primary + text-primary-foreground.