design-infraReport a problem or share feedback← Catalog
Spotlight Indicator
curatedfreemicrokit/spotlight-indicator
A glowing rail that slides to the active item in a vertical nav — the same indicator powering this site's sidebar.
$
npx shadcn@latest add https://microkit.co/r/spotlight-indicator.jsonnpm deps: lucide-react
Our notes
Vertical-nav indicator: JS measures the active item and a 2px glowing rail transitions top/height (300ms). Lovely for sidebars and settings nav. No reduced-motion guard; orange #f97316 glow and hex greys are hard-coded — use var(--primary) for the rail and its box-shadow.- Source
- MicroKit
- Kind
- component
- Categories
- navigation, sidebar
- Use as
- recipe — technique you apply to your own markup
- Applies to
- sidebarnavigation
- Motion
- on state · subtle · css + js · low cost · ignores 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 →- Sidebar Navbeautifui/sidebar-navCollapsible workspace and chat navigation with gliding hover states. Then add `@import "./beautifui/sidebar-nav.css";` to your app's globals.css.
- App shelloc/app-shellProduct app frame on the shadcn sidebar: brand header, grouped nav with badges, user dropdown, icon-collapse (Cmd/Ctrl+B) and mobile sheet; header bar with breadcrumbs + action slot; content slot.
- Blur Glide Menumicrokit/blur-glide-menuNested menu (role=menu/menuitem, aria-haspopup, back button) where the outgoing step blurs then glides aside while the surface animates to the incoming step's height — a CSS-keyframe take on the multi-view drawer. motion-reduce shortens every transition. Demo data and colours are hard-coded.