React component toolkit with smart completion, hover docs, drag-and-drop, auto-imports, and inspections for Mantine. 80+ components and 20+ hooks from @mantine/core, hooks, dates, charts, notifications, spotlight, carousel, dropzone, and more.

• JetBrains Marketplace
• GitHub

If you have any questions, feature requests or stumble upon the occasional bug, please open an issue on GitHub or reach out to us at [Ilscipio]

• Categorized sidebar with all Mantine components grouped by function (View > Tool Windows > Mantine Components, or click the Mantine icon in the right sidebar)
• Live preview with dark/light mode toggle showing rendered output for each component
• Instant search - type in the search bar to filter across all components and hooks
• Double-click or Enter on any component to insert its code at the caret position
• Drag and drop components directly from the browser into your open editor
• Automatic import placement - the import { Button } from "@mantine/core" line is inserted at the top of the file, merged with existing Mantine imports
• Copy Code / Copy Import buttons for clipboard-based workflows

• Props completion - type <Button and press Ctrl+Space to see all available props with types and descriptions
• Enum value completion - type variant=" and see all valid values: filled, light, outline, subtle, default, gradient, etc.
• Mantine type support - completions for MantineColor (blue, red, grape, violet, ...), MantineSize (xs, sm, md, lg, xl), MantineRadius, and MantineSpacing
• Compound components - works with dotted names like Tabs.Tab, Menu.Item, Accordion.Panel
• Import completion - type from "@mantine/ to see all available packages and their exports
• Works in .tsx, .jsx, .ts, and .js files

• Ctrl+Q (or F1 on macOS) on any Mantine component tag for instant documentation
• Props table with type, default value, and allowed values for each prop
• Package badge showing which @mantine/* package the component belongs to
• Direct link to the official mantine.dev documentation page for the component
• Hover over any Mantine tag in the editor to see the documentation popup

• Unknown prop warnings - highlights misspelled or non-existent props on Mantine components
• Smart filtering - skips standard React props (className, style, id, key, ref, data-, aria-)
• Configure at Settings > Editor > Inspections > Mantine to adjust severity or disable

• Automatic placement - imports are inserted after the last existing import, or at the top of the file if none exist
• Smart merging - inserting a Modal when you already have import { Button } from "@mantine/core" produces import { Button, Modal } from "@mantine/core" instead of a duplicate line
• Type import support - handles import type { ... } statements separately from value imports
• File type awareness - only adds ES6 imports in .tsx, .jsx, .ts, .js, .mjs, .mts files

• @mantine/core - Button, TextInput, Select, Modal, Tabs, AppShell, Accordion, Card, and 60+ components
• @mantine/hooks - useDisclosure, useForm, useMediaQuery, useClipboard, useDebouncedValue, and 20+ hooks
• @mantine/dates - DateInput, DatePicker, DateTimePicker, Calendar, MonthPickerInput
• @mantine/charts - AreaChart, BarChart, LineChart, PieChart, DonutChart, RadarChart
• @mantine/notifications - Notification system with show/update/hide
• @mantine/spotlight - Command palette / spotlight search
• @mantine/carousel - Embla-based carousel with slide controls
• @mantine/dropzone - File upload with MIME type filtering
• @mantine/code-highlight - Syntax-highlighted code blocks
• @mantine/tiptap - Rich text editor with Mantine styling

1. Install the plugin from JetBrains Marketplace
2. Open a project that has @mantine/core in package.json
3. The plugin activates automatically and shows a welcome dialog on first launch
4. Open the Mantine Components tool window from the right sidebar
5. Browse or search for a component, then double-click to insert it at the caret
6. Type <Button in a .tsx file and press Ctrl+Space for prop completion

• Double-click a component in the browser to insert code + import in one step
• Drag and drop from the browser directly into your editor for quick placement
• Ctrl+Q on any Mantine tag in your code for instant documentation
• Ctrl+Space inside a Mantine JSX tag for prop and value completion
• Alt+Enter on an inspection warning for quick-fix suggestions

• Plugin settings: File > Settings > Tools > Flexible For Mantine
• Props completion: Enable or disable context-aware prop suggestions
• Hover documentation: Enable or disable the documentation popup
• Inspections: Enable or disable unknown prop warnings
• Color scheme: Settings > Editor > Inspections > Mantine to adjust severity levels

• Component browser empty? Make sure @mantine/core appears in your project's package.json or lock file
• No completion? Check that the JavaScript plugin is installed and enabled (bundled with WebStorm, IntelliJ Ultimate, PhpStorm)
• Live preview not loading? JCEF must be available in your IDE; it may be disabled in some configurations

Works with all JetBrains IDEs that include JavaScript/TypeScript support:

• WebStorm 2023.3+
• IntelliJ IDEA Ultimate 2023.3+
• PhpStorm 2023.3+

Requires the JavaScript plugin (bundled with the above IDEs).

The integration is the work of Ilscipio:

We build production applications with React and Mantine as part of our technology stack and understand the daily workflow of frontend developers. We created this plugin to make Mantine development faster and more enjoyable in JetBrains IDEs.

We're sharing this tool with the Mantine community to support the ecosystem's growth and to help teams build better user interfaces.

• Special discounts are available for individual developers and of course for the whole Open Source community.

1(https://www.ilscipio.com/).