Mcoli UI - MC Combobox

Overview

The mc-combobox is a core component of the MicroClub UI library. Built on the @base-ui/react combobox 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

'use client';import * as React from 'react';import {  McCombobox,  McComboboxTrigger,  McComboboxSearch,  McComboboxContent,  McComboboxList,  McComboboxItem,} from '@/registry/ui/mc-combobox';const frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix'] as const;export default function McComboboxDemo() {  const [selectedValue, setSelectedValue] = React.useState('select a framework');  return (    <div className="mb-50">      <McCombobox        items={frameworks}        value={selectedValue}        onValueChange={(val) => setSelectedValue(val as string)}      >        <McComboboxTrigger className="shadow-sm border-slate-200" />        <McComboboxContent>          <McComboboxSearch placeholder="Search framework..." />          <McComboboxList>            {(item: string) => (              <McComboboxItem key={item} value={item}>                {item}              </McComboboxItem>            )}          </McComboboxList>        </McComboboxContent>      </McCombobox>    </div>  );}

Add to Your Project

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

npx mcoli-ui@latest add mc-combobox

pnpm dlx mcoli-ui@latest add mc-combobox

yarn dlx mcoli-ui@latest add mc-combobox

bunx mcoli-ui@latest add mc-combobox

Manual Setup

If you prefer manual control:

Install the core dependencies

npm install @base-ui/react lucide-react

pnpm add @base-ui/react lucide-react

yarn add @base-ui/react lucide-react

bun add @base-ui/react lucide-react

Copy the source code

'use client';import { Combobox as ComboboxPrimitive } from '@base-ui/react';import { CheckIcon, ChevronsUpDown, SearchIcon } from 'lucide-react';import { cn } from '@/lib/utils';const McCombobox = ComboboxPrimitive.Root;function McComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;}function McComboboxTrigger({  className,  placeholder,  ...props}: ComboboxPrimitive.Trigger.Props & { placeholder?: string }) {  return (    <ComboboxPrimitive.Trigger      data-slot="combobox-trigger"      className={cn(        'min-w-50 min-h-9 px-3 py-2 rounded-md ring-1 ring-inset ring-border shadow-xs flex justify-between items-center bg-input text-foreground paragraph-sm font-medium',        className      )}      {...props}    >      <McComboboxValue placeholder={placeholder} />      <ChevronsUpDown className="size-4 text-foreground" />    </ComboboxPrimitive.Trigger>  );}function McComboboxSearch({  className,  placeholder,  ...props}: ComboboxPrimitive.Input.Props & { placeholder?: string }) {  return (    <div className="flex items-center border-b px-3 h-fit w-full gap-2" data-slot="combobox-search">      <SearchIcon className="text-muted-foreground size-4" />      <ComboboxPrimitive.Input        className={cn(          'flex h-10 w-full rounded-md bg-transparent py-3 outline-none paragraph-sm placeholder:text-muted-foreground',          className        )}        placeholder={placeholder}        {...props}      />    </div>  );}function McComboboxContent({  className,  side = 'bottom',  sideOffset = 8,  align = 'start',  ...props}: ComboboxPrimitive.Popup.Props &  Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset'>) {  return (    <ComboboxPrimitive.Portal>      <ComboboxPrimitive.Positioner        side={side}        sideOffset={sideOffset}        align={align}        className="isolate z-50"      >        <ComboboxPrimitive.Popup          data-slot="combobox-content"          className={cn(            'w-[var(--anchor-width)] flex flex-col rounded-md ring-1 ring-inset ring-border bg-card-background shadow-md',            className          )}          {...props}        />      </ComboboxPrimitive.Positioner>    </ComboboxPrimitive.Portal>  );}function McComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {  return (    <ComboboxPrimitive.List      data-slot="combobox-list"      className={cn('p-1 h-fit w-full', className)}      {...props}    />  );}function McComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {  return (    <ComboboxPrimitive.Item      data-slot="combobox-item"      className={cn(        'relative flex w-full rounded py-1.5 px-2 gap-2 justify-between paragraph-sm items-center',        'data-highlighted:bg-accent data-highlighted:text-accent-foreground',        className      )}      {...props}    >      {children}      <ComboboxPrimitive.ItemIndicator>        <CheckIcon className="size-4 text-accent-foreground" />      </ComboboxPrimitive.ItemIndicator>    </ComboboxPrimitive.Item>  );}export {  McCombobox,  McComboboxTrigger,  McComboboxSearch,  McComboboxContent,  McComboboxList,  McComboboxItem,  McComboboxValue,};

Adjust import paths

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

Usage

import {
  McCombobox,
  McComboboxTrigger,
  McComboboxContent,
  McComboboxSearch,
  McComboboxList,
  McComboboxItem,
} from '@/components/ui/mc-combobox';

const frameworks = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'];

export default function Example() {
  const [value, setValue] = React.useState('select value');

  return (
    <McCombobox items={frameworks} value={value} onValueChange={setValue}>
      <McComboboxTrigger />
      <McComboboxContent>
        <McComboboxSearch placeholder="Search framework..." />
        <McComboboxList>
          {(item) => (
            <McComboboxItem key={item} value={item}>
              {item}
            </McComboboxItem>
          )}
        </McComboboxList>
      </McComboboxContent>
    </McCombobox>
  );
}

Examples

Basic McCombobox

<McCombobox items={frameworks} value={value} onValueChange={setValue}>
  <McComboboxTrigger />
  <McComboboxContent>
    <McComboboxSearch placeholder="Search framework..." />
    <McComboboxList>
      {(item) => (
        <McComboboxItem key={item} value={item}>
          {item}
        </McComboboxItem>
      )}
    </McComboboxList>
  </McComboboxContent>
</McCombobox>

API Reference

Props

Prop	Type	Default	Description
`items`	`T[]`	-	Array of items to display
`value`	`T`	-	Currently selected value
`onValueChange`	`(value: T) => void`	-	Callback when value changes
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Child components

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

McComboboxTrigger

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes
`placeholder`	`string`	`undefined`	Placeholder text for the value
`children`	`ReactNode`	`undefined`	Custom trigger content

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

McComboboxContent

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes
`side`	`"top" \| "bottom"`	`"bottom"`	Position side
`sideOffset`	`number`	`8`	Offset from trigger
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment

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

McComboboxSearch

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes
`placeholder`	`string`	`undefined`	Placeholder text

McComboboxList

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes

McComboboxItem

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes
`value`	`string`	-	Value of the item
`children`	`ReactNode`	-	Item content

MC Combobox

On this page