Halo Tabs

Renders tabs with gradient indicators aligned with Halo Card rim colors. Displays underline or pill variants. Use for consistent tab styling in UIs requiring visual harmony with card components.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/halo-tabs

npx layro-cli add @nolly-studio/halo-tabs

npx layro-cli add @nolly-studio/halo-tabs

bunx layro-cli add @nolly-studio/halo-tabs

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

/**
 * Tabs aligned with `HaloCardPolished` rim language: gradient indicator (underline or pill)
 * using the magenta / violet / cyan family from the card border trails.
 */
import type { ComponentProps } from "react"
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"

import { cn } from "@/lib/utils"

/** Ambient gradient (pill indicator glow) — same hue family as `HaloCardBorderTrail`. */
const TAB_GRADIENT_GLOW =
  "linear-gradient(90deg, transparent 0%, rgba(255,0,128,0.35) 22%, rgba(121,40,202,0.45) 50%, rgba(0,212,255,0.38) 78%, transparent 100%)"