mantine-combobox
Build custom dropdown/select/autocomplete/multiselect components using Mantine's Combobox primitives. Use this skill when: (1) creating a new custom select-like component with Combobox primitives, (2) building a searchable dropdown, (3) implementing a multi-select or tags input variant, (4) customizing option rendering, (5) adding custom filtering logic, or (6) any task involving useCombobox, Combobox.Target, Combobox.Option, or Combobox.Dropdown.
How do I install this agent skill?
npx skills add https://github.com/mantinedev/skills --skill mantine-comboboxIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill provides documentation and code implementation patterns for the Mantine Combobox UI component. It contains no executable scripts, network requests, or security vulnerabilities.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerwarn
3/3 files flagged
- ZeroLeakspass
Score: 93/100 · 2 sections analyzed
What does this agent skill do?
Mantine Combobox Skill
Overview
Combobox provides low-level primitives for building any select-like UI. The built-in
Select, Autocomplete, and TagsInput components are all built on top of it.
Core Workflow
1. Create the store
const combobox = useCombobox({
onDropdownClose: () => combobox.resetSelectedOption(),
onDropdownOpen: () => combobox.selectFirstOption(),
});
2. Render structure
<Combobox store={combobox} onOptionSubmit={handleSubmit}>
<Combobox.Target>
<InputBase
component="button"
pointer
rightSection={<Combobox.Chevron />}
onClick={() => combobox.toggleDropdown()}
>
{value || <Input.Placeholder>Pick value</Input.Placeholder>}
</InputBase>
</Combobox.Target>
<Combobox.Dropdown>
<Combobox.Options>
{options.map((item) => (
<Combobox.Option value={item} key={item}>{item}</Combobox.Option>
))}
</Combobox.Options>
</Combobox.Dropdown>
</Combobox>
3. Handle submit
const handleSubmit = (val: string) => {
setValue(val);
combobox.closeDropdown();
};
Target Types
| Scenario | Use |
|---|---|
| Button trigger (no text input) | <Combobox.Target targetType="button"> |
| Input trigger | <Combobox.Target> (default) |
| Pills + separate input (multi-select) | <Combobox.DropdownTarget> + <Combobox.EventsTarget> |
References
references/api.md— Full API:useComboboxoptions and store, all sub-component props, CSS variables, Styles API selectorsreferences/patterns.md— Code examples: searchable select, multi-select with pills, groups, custom rendering, clear button, form integration
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/mantinedev/skills/mantine-combobox">View mantine-combobox on skillZs</a>