Hero UI component
Import the Hero UI example into the project.
Introduction
This template provides a reusable setup for importing Hero 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": "hero-ui://component/component", "options": { "id": "animated-list", "slotId": "slotId", "slotVersion": "slotVersion", "components": ["notification-list.tsx"], "extension": "hero-ui://component/cookie-consent/extension.json5" }}Options
| Option | Description | Type | Required | Default |
|---|---|---|---|---|
| id | A unique identifier for the Hero UI 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 | - | – |
Other templates using
Hero UI
Hero UI
Start building in seconds
Paste the following command in your terminal and let the CLI do the rest.
npx croct@latest init