Radix Tabs UI Component (shadcn/tabs.tsx)

ai-engineering-hub · open-agent-builder/components/ui/shadcn/tabs.tsx · typescript · MIT
ui, fw:react, fw:radix, fw:tailwind

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