Mcoli UI - MC Tabs

Overview

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

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

Preview

import { McTabs, McTabsList, McTabsTrigger } from '../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>    </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

pnpm add @base-ui/react

yarn add @base-ui/react

bun add @base-ui/react

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 bg-muted rounded-lg p-[3px] size-fit', {  variants: {    variant: {      horizontal: 'flex-row',      vertical: 'flex-col',    },  },  defaultVariants: {    variant: 'horizontal',  },});function McTabs({ ...props }: TabsPrimitive.Root.Props) {  return <TabsPrimitive.Root data-slot="tabs" {...props} />;}function McTabsList({  className,  variant,  ...props}: TabsPrimitive.List.Props & VariantProps<typeof McTabsListVariants>) {  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}    />  );}export { McTabs, McTabsList, McTabsTrigger };

Adjust import paths

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

Usage

import { McTabs, McTabsList, 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>
    </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">
  <McTabsList variant="vertical">
    <McTabsTrigger value="tab1">Tab 1</McTabsTrigger>
    <McTabsTrigger value="tab2">Tab 2</McTabsTrigger>
    <McTabsTrigger value="tab3">Tab 3</McTabsTrigger>
  </McTabsList>
</McTabs>

API Reference

Props

Prop	Type	Default	Description
`variant`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout for the tab list
`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

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

MC Tabs

On this page