Tabs

Switch between views with an indicator that slides to the active tab, as a segmented control or an underline, and lists that scroll when they overflow.

bypreet from Hextaui

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/tabs

npx layro-cli add @preetsuthar17/tabs

npx layro-cli add @preetsuthar17/tabs

bunx layro-cli add @preetsuthar17/tabs

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

Code

Demo

"use client"

import * as React from "react"
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
import { cva } from "class-variance-authority"
import { cn } from "cn"

type ClassName<State> =
  string | ((state: State) => string | undefined) | undefined

function mergeClassName<State>(base: string, className: ClassName<State>) {
  return typeof className === "function"
    ? (state: State) => cn(base, className(state))
    : cn(base, className)