# Using UI components & functions across multiple Magic Features

Imagine you have an e-commerce homepage (in a MagicJS project), and you've already integrated a powerful magic feature called "Product Catalogue". Now, you want to add a comment section for users to share their thoughts on the listed products.

With MagicJS, you can seamlessly nest one Magic Feature inside another. In this case, you can effortlessly integrate the "Comment" feature into the existing "Product Catalogue" feature. It's as simple as copying the Comment Feature folder and pasting it into the Product Catalogue folder.

What makes this process truly remarkable is that you're not just adding a standalone comment feature; you're incorporating it as a complete package. This means all the functionalities, user interface components, and other necessary elements come integrated seamlessly. It's like placing a fully assembled puzzle piece into another puzzle - everything fits perfectly.

In essence, MagicJS allows you to build complex web applications with ease by stacking features within features. The **modular** nature of **Magic Features** ensures that you can enhance your Product Catalogue not just with a comment section but with a fully functional and cohesive package that enriches the overall user experience.

## [importUI()](/magicjs/api-references/frontend/importui.md)

`importUI()` plays an important role in importing magic features. The `importUI()` function simplifies UI component imports using "**aliases"** from a `JSON` configuration, promoting a modular and organized project structure for improved code manageability.

## Aliases

### Configuration

In your project, you would have a JSON configuration file "`config.json"` that associates aliases with specific "Magic Features". This configuration serves as a mapping between the user-friendly alias and the actual file path or module path of the magic feature.

> Here's an example for `config.json` file.

```json
{
    "aliases": [
        {
            "fileName": "comment.tsx",
            "alias": "@comment"
        }
    ]
}
```

### **Using Aliases with `importUI`**

The `importUI` function is then used to dynamically import UI components based on the `aliases` defined in the configuration.

> Here's an example:

```tsx
import { importUI } from "@magicjs.dev/frontend"
import React from "react"

const Comment = importUI("@comment")

export default function Component(props: any) {
  return (
    <div>
      <Comment />
    </div>
  )
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://skyslit.gitbook.io/magicjs/advanced-guide/using-ui-components-and-functions-across-multiple-magic-features.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.