design-infraReport a problem or share feedback← Catalog
Halo Tabs
curatedfreecult-ui/halo-tabs
Base UI tabs with gradient indicator: underline or pill variant aligned with Halo Card rim colors
$
npx shadcn@latest add @cult-ui/halo-tabsnpm deps: @base-ui/react
Our notes
Base UI tabs with an animated glowing 'halo' indicator. Surfaces use tokens, but the halo glow is a hard-coded cyan/purple/pink palette. Needs @base-ui/react.- Source
- Cult UI
- Kind
- component
- Categories
- tabs
- Use as
- drop-in — replaces your component
- Applies to
- tabs
- Motion
- on state, hover · subtle · css · low cost · respects reduced motion
- Licence
- MIT (nolly-studio/cult-ui). Pro blocks/templates at pro.cult-ui.com are paid — not catalogued.
- Live demo
- www.cult-ui.com
- Docs
- www.cult-ui.com
Similar
Compare all 4 →- Direction Aware Tabscult-ui/direction-aware-tabsTabs whose content slides in the direction of travel. Hard-codes neutral-600/700 + white text — swap to bg-muted/text-foreground.
- Animated Tabscult-ui/animated-tabsDeprecated alias for halo-tabs. Prefer npx shadcn add https://cult-ui.com/r/halo-tabs.json
- 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).