MC Tabs React component

Overview

The mc-tabs collection is a flexible tab navigation primitive for Micro Club UI. Built on the @base-ui/react tabs primitive, it delivers accessible focus behavior and clean Micro Club styling through Tailwind CSS.

Use mc-tabs when you need a polished tabbed interface with horizontal or vertical layout options.

Preview

Content for the first tab.

import { McTabs, McTabsList, McTabsPanel, McTabsTrigger } from '@/components/ui/mc-tabs';export default function McTabsDemo() {  return (    <McTabs defaultValue="tab1">      <McTabsList>        <McTabsTrigger value="tab1">Tab 1</McTabsTrigger>        <McTabsTrigger value="tab2">Tab 2</McTabsTrigger>        <McTabsTrigger value="tab3">Tab 3</McTabsTrigger>      </McTabsList>      <McTabsPanel value="tab1">Content for the first tab.</McTabsPanel>      <McTabsPanel value="tab2">Content for the second tab.</McTabsPanel>      <McTabsPanel value="tab3">Content for the third tab.</McTabsPanel>    </McTabs>  );}

Add to Your Project

Deploy the mc-tabs components directly to your components/ui directory:

npx mcoli-ui@latest add mc-tabs

pnpm dlx mcoli-ui@latest add mc-tabs

yarn dlx mcoli-ui@latest add mc-tabs

bunx mcoli-ui@latest add mc-tabs

Manual Setup

If you prefer manual control:

Install the core dependencies

npm install @base-ui/react class-variance-authority

pnpm add @base-ui/react class-variance-authority

yarn add @base-ui/react class-variance-authority

bun add @base-ui/react class-variance-authority

Copy the source code

'use client';import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';import { cva, type VariantProps } from 'class-variance-authority';import { cn } from '@/lib/utils';const McTabsListVariants = cva(  'flex flex-row bg-muted rounded-lg p-[3px] size-fit data-[orientation=vertical]:flex-col',  {    variants: {      variant: {        horizontal: '',        vertical: 'flex-col',      },    },  });function McTabs({ className, ...props }: TabsPrimitive.Root.Props) {  return (    <TabsPrimitive.Root      data-slot="tabs"      className={cn('flex flex-col gap-2 data-[orientation=vertical]:flex-row', className)}      {...props}    />  );}function McTabsList({  className,  variant,  ...props}: TabsPrimitive.List.Props &  VariantProps<typeof McTabsListVariants> & {    /**     * @deprecated Only changes the layout. Set `orientation="vertical"` on `McTabs` instead,     * which also switches keyboard navigation to ArrowUp/ArrowDown.     */    variant?: 'horizontal' | 'vertical' | null;  }) {  return (    <TabsPrimitive.List      data-slot="tabs-list"      className={cn(McTabsListVariants({ variant }), className)}      {...props}    />  );}function McTabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {  return (    <TabsPrimitive.Tab      data-slot="tabs-trigger"      className={cn(        'flex flex-col items-center justify-center min-h-7 min-w-19.5 px-2 py-1 rounded-md text-[14px] gap-2.5 paragraph-sm font-medium text-muted-foreground bg-transparent',        'data-active:bg-accent',        'data-active:ring-1 data-active:ring-inset data-active:ring-border',        'data-active:text-accent-foreground',        className      )}      {...props}    />  );}function McTabsPanel({ className, ...props }: TabsPrimitive.Panel.Props) {  return (    <TabsPrimitive.Panel      data-slot="tabs-panel"      className={cn('flex-1 text-sm text-foreground outline-none', className)}      {...props}    />  );}export { McTabs, McTabsList, McTabsTrigger, McTabsPanel };

Adjust import paths

Ensure your @/lib/utils or equivalent classname helper is correctly imported.

Usage

import { McTabs, McTabsList, McTabsPanel, McTabsTrigger } from '@/components/ui/mc-tabs';

export default function Example() {
  return (
    <McTabs defaultValue="tab1">
      <McTabsList>
        <McTabsTrigger value="tab1">Tab 1</McTabsTrigger>
        <McTabsTrigger value="tab2">Tab 2</McTabsTrigger>
        <McTabsTrigger value="tab3">Tab 3</McTabsTrigger>
      </McTabsList>
      <McTabsPanel value="tab1">Content for tab 1</McTabsPanel>
      <McTabsPanel value="tab2">Content for tab 2</McTabsPanel>
      <McTabsPanel value="tab3">Content for tab 3</McTabsPanel>
    </McTabs>
  );
}

Examples

Horizontal Tabs

<McTabs defaultValue="tab1">
  <McTabsList>
    <McTabsTrigger value="tab1">Tab 1</McTabsTrigger>
    <McTabsTrigger value="tab2">Tab 2</McTabsTrigger>
    <McTabsTrigger value="tab3">Tab 3</McTabsTrigger>
  </McTabsList>
</McTabs>

Vertical Tabs

<McTabs defaultValue="tab1" orientation="vertical">
  <McTabsList>
    <McTabsTrigger value="tab1">Tab 1</McTabsTrigger>
    <McTabsTrigger value="tab2">Tab 2</McTabsTrigger>
    <McTabsTrigger value="tab3">Tab 3</McTabsTrigger>
  </McTabsList>
  <McTabsPanel value="tab1">Content for tab 1</McTabsPanel>
  <McTabsPanel value="tab2">Content for tab 2</McTabsPanel>
  <McTabsPanel value="tab3">Content for tab 3</McTabsPanel>
</McTabs>

orientation="vertical" stacks the triggers, places the panel beside them and switches keyboard navigation to ArrowUp/ArrowDown.

API Reference

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout and keyboard navigation (`McTabs`)
`variant`	`"horizontal" \| "vertical"`	`undefined`	Deprecated: use `orientation` on `McTabs`
`defaultValue`	`string`	`undefined`	Initial tab value for uncontrolled mode
`value`	`string`	`undefined`	Controlled selected tab value
`onValueChange`	`(value: string) => void`	`undefined`	Callback when the active tab changes
`className`	`string`	`undefined`	Additional CSS classes

McTabsPanel takes the value of the tab it belongs to.

All other props from @base-ui/react/tabs are supported.

MC Tabs

On this page