# Mantine component

Import the Mantine example into the project.

By Mantine. Categories: boilerplate, framework, language, library.

[Source](https://github.com/croct-tech/templates/blob/master/templates/mantine/component/component/)

## Installation

```sh
npx croct@latest init
```

# Introduction

This template provides a reusable setup for importing [Mantine](https://ui.mantine.dev?utm_source=croct) components,
fully integrated with Croct for content management, AB testing, and real-time personalization.

It supports downloading code, configuring slots, and extending functionality with additional actions.
If the current directory does not contain a project, the template creates a new one
using [Next.js](https://nextjs.org/?utm_source=croct).

## Usage

Here is an example of how to use this template:

```json
{
  "name": "import",
  "template": "mantine://component/component",
  "options": {
    "id": "hero-section",
    "slotId": "slotId",
    "slotVersion": "slotVersion",
    "components": ["hero-section.tsx"],
    "extension": "mantine://block/hero-section/extension.json5"
  }
}
```

## Options

| Option        | Description                                                                | Type        | Required | Default  |
|---------------|----------------------------------------------------------------------------|-------------|----------|----------|
| `id`          | A unique identifier for the Mantine component, as defined in the registry. | `string`    | Yes      | –        |
| `version`     | The version of Next.js to use when generating a new project.               | `string`    | No       | `latest` |
| `router`      | The router format to use (`app` or `page`).                                | `string`    | No       | `app`    |
| `slotId`      | The variable name that holds the slot ID created or used by the template.  | `reference` | No       | –        |
| `slotVersion` | The variable name that holds the version of the slot.                      | `reference` | No       | –        |
| `components`  | A list of component files to download and include in the project.          | `array`     | No       | –        |
| `extension`   | The URL of an extension template to apply.                                 | No          | -        | –        |