Magic UI component
Import the Magic UI example into the project.

Introduction
This template provides a reusable setup for importing Magic UI 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.
Usage
Here is an example of how to use this template:
{ "name": "import", "template": "magic-ui://component/component", "options": { "id": "animated-list", "slotId": "slotId", "slotVersion": "slotVersion", "components": ["notification-list.tsx"], "extension": "magic-ui://component/marquee/extension.json5" }}
Options
Option | Description | Required | Default |
---|---|---|---|
id | A unique identifier for the Magic UI component, as defined in the registry. | Yes | – |
version | The version of Next.js to use when generating a new project. | No | latest |
router | The router format to use (app or page). | No | app |
slotId | The variable name that holds the slot ID created or used by the template. | Yes | – |
slotVersion | The variable name that holds the version of the slot. | Yes | – |
components | A list of Magic UI component files to download and include in the project. | No | – |
extension | The URL of an extension template to apply. | Yes | - |
Explore or help us improve this template
Other templates using
Magic UI

Start building in seconds
Paste the following command in your terminal and let the CLI do the rest.
npx croct@latest init