Styled Radix UI tabs primitives (Tabs, TabsList, TabsTrigger) with Tailwind classes. Reuse for accessible tabbed navigation or panel switching in React apps.
// Source: https://github.com/patchy631/ai-engineering-hub | License: MIT | Copyright 2024 patchy631
// Provided via justclaw.it.com; keep this notice with the code.
"use client";
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@/utils/cn";
const Tabs = TabsPrimitive.Root;
const TabsList = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.List>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
<TabsPrimitive.List
ref={ref}
className={cn(
"inline-flex items-center justify-center gap-4 border-b border-border-faint px-16 text-body-small text-black-alpha-48",
className,
)}
{...props}
/>
));
TabsList.displayName = TabsPrimitive.List.displayName;
... (truncated -- full source via MCP)
See the full source, get the GitHub permalink, and search for more like it.
Get a free API key