# Halo Tabs
> Tabs for React and shadcn/ui built on Base UI, with a gradient underline or pill indicator that slides to the active tab.
Source: https://www.cult-ui.com/docs/components/halo-tabs
## Example
```tsx title="halo-tabs-demo.tsx"
"use client"
import {
HaloTabs,
HaloTabsContent,
HaloTabsIndicator,
HaloTabsList,
HaloTabsTrigger,
} from "@/components/ui/halo-tabs"
export default function HaloTabsDemo() {
return (
Tabs — underline
Overview
Usage
Billing
Project summary, health metrics, and rollouts for the current
workspace.
API volume, seat counts, and rate limits for the billing period in
view.
Invoices, payment methods, and tax details for this account and
billing.
Tabs — pill
Design
Code
Preview
Tokens, spacing, and motion aligned with the polished surfaces.
Implementation notes and props for each primitive.
Live preview of the active variant.
)
}
```
Halo Tabs is a React tabs component for shadcn/ui built on Base UI Tabs and CSS transitions. Use it to organize dashboard panels, settings sections, or code and preview views.
## Installation
### CLI
```bash
npx shadcn@latest add @cult-ui/halo-tabs
```
### Manual
**Install the required dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx title="halo-tabs.tsx"
"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%)"
export type HaloTabsVariant = "underline" | "pill"
export function HaloTabs({
className,
...props
}: ComponentProps) {
return (
)
}
export function HaloTabsList({
className,
variant = "underline",
...props
}: ComponentProps & {
variant?: HaloTabsVariant
}) {
return (
)
}
export function HaloTabsTrigger({
className,
...props
}: ComponentProps) {
return (
)
}
export function HaloTabsIndicator({
className,
variant = "underline",
...props
}: ComponentProps & {
variant?: HaloTabsVariant
}) {
return (
{variant === "pill" ? (
) : null}
{variant === "pill" ? (
) : null}
{variant === "pill" ? (
) : null}
)
}
export function HaloTabsContent({
className,
...props
}: ComponentProps) {
return (
)
}
export type HaloTabsProps = ComponentProps
```
**Update the import paths to match your project setup.**