Mcoli UI - MC Switch

Overview

The mc-switch is a core component of the MicroClub UI library. Built on the @base-ui/react switch primitive, it combines world-class accessibility with MicroClub's signature styling via Tailwind CSS v4.

As a part of the MicroClub library, this component is designed for instant deployment into your codebase, giving you full ownership of its look and behavior.

Preview

import { McSwitch } from '../ui/mc-switch';export default function McSwitchDemo() {  return <McSwitch></McSwitch>;}

Add to Your Project

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

npx mcoli-ui@latest add mc-switch

pnpm dlx mcoli-ui@latest add mc-switch

yarn dlx mcoli-ui@latest add mc-switch

bunx mcoli-ui@latest add mc-switch

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 { Switch as SwitchPrimitive } from '@base-ui/react/switch';import { cn } from '@/lib/utils';function McSwitch({  className,  size = 'default',  ...props}: SwitchPrimitive.Root.Props & {  size?: 'sm' | 'default';}) {  return (    <SwitchPrimitive.Root      data-slot="switch"      data-size={size}      className={cn(        'peer group/switch relative inline-flex shrink-0 items-center bg-input ring-1 ring-inset ring-border',        'transition-[background-color,ring-color,box-shadow] duration-300 ease-out outline-none',        'focus-visible:ring-ring focus-visible:ring-offset-2',        'aria-invalid:ring-destructive aria-invalid:ring-offset-2',        'dark:aria-invalid:ring-destructive/40',        'data-disabled:bg-input/70 data-disabled:opacity-50',        'data-checked:bg-primary data-checked:ring-transparent',        'data-unchecked:bg-input data-unchecked:ring-border',        'data-[size=default]:h-7 data-[size=default]:w-12 data-[size=default]:rounded-full data-[size=default]:p-1',        'data-[size=sm]:h-4 data-[size=sm]:w-7 data-[size=sm]:rounded-full data-[size=sm]:p-[2px]',        className      )}      {...props}    >      <SwitchPrimitive.Thumb        data-slot="switch-thumb"        className={cn(          'pointer-events-none block rounded-full bg-background ring-1 ring-inset ring-border transition-transform duration-300 ease-out',          'dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground',          'group-data-[size=default]/switch:size-5',          'group-data-[size=default]/switch:data-unchecked:translate-x-0',          'group-data-[size=default]/switch:data-checked:translate-x-5',          'group-data-[size=sm]/switch:size-3',          'group-data-[size=sm]/switch:data-unchecked:translate-x-0',          'group-data-[size=sm]/switch:data-checked:translate-x-3'        )}      />    </SwitchPrimitive.Root>  );}export { McSwitch };

Adjust import paths

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

Usage

import { McSwitch } from '@/components/ui/mc-switch';

export default function Example() {
  return <McSwitch />;
}

Examples

Sizes

<McSwitch size="sm" />
<McSwitch size="default" />

Default Checked

<McSwitch defaultChecked />

Controlled

const [checked, setChecked] = React.useState(false);

<McSwitch checked={checked} onCheckedChange={setChecked} />;

States

<McSwitch disabled />
<McSwitch disabled defaultChecked />

API Reference

Props

Prop	Type	Default	Description
`size`	`"sm" \| "default"`	`"default"`	The size of the switch
`checked`	`boolean`	`undefined`	Controlled checked state
`defaultChecked`	`boolean`	`false`	Initial checked state when uncontrolled
`onCheckedChange`	`(checked: boolean) => void`	`undefined`	Callback fired when the checked state changes
`disabled`	`boolean`	`false`	Disables the switch and prevents interactions
`className`	`string`	`undefined`	Additional CSS classes

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

MC Switch

On this page