Mantine Combobox

If you're building custom dropdowns, multi-selects, or autocomplete inputs with Mantine, this skill walks you through the Combobox primitives that power all the built-in select components. You'll learn the three-step pattern: create a store with useCombobox, wire up the Target/Dropdown/Option structure, and handle submissions. The references cover different target types for buttons versus inputs, searchable variants, pills for multi-select, and custom option rendering. It's lower-level than reaching for Select or Autocomplete directly, but that's the point when you need something those components don't offer out of the box.

skills.sh installs: 3.8K
GitHub stars: 65
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mantinedev/skills --skill mantine-combobox --agent claude-code

Installs into .claude/skills of the current project.

Files

Mantine Combobox Skill

Written for Mantine 9.x.

Overview

Combobox provides low-level primitives for building any select-like UI. The built-in Select, MultiSelect, Autocomplete, and TagsInput components are all built on top of it.

Check for a ready-made component first

Build with Combobox primitives only when none of these fit:

Need	Use
Standard select, multi-select, autocomplete or tags input	`Select`, `MultiSelect`, `Autocomplete`, `TagsInput` (all support `renderOption`)
Options dropdown attached to a button or any other element, no input	`ComboboxPopover` (data-driven: `data`, `value`, `onChange`, `searchable`, `multiple`)
Hierarchical options	`TreeSelect` (see below)
More than a few hundred options	`Combobox` with `useVirtualizedCombobox`, see the virtualized pattern

<ComboboxPopover data={['React', 'Angular', 'Vue']} value={value} onChange={setValue}>
  <ComboboxPopover.Target>
    <Button variant="default">{value || 'Select framework'}</Button>
  </ComboboxPopover.Target>
</ComboboxPopover>

SKILL.md on GitHub