> For the complete documentation index, see [llms.txt](https://skyslit.gitbook.io/magicjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skyslit.gitbook.io/magicjs/api-references/frontend/importui.md).

# importUI() 

### Example of importing a header file to a listing page.

* `config.json` header file:

```typescript
"aliases": [
    {
        "fileName": "header.tsx",
        "alias": "@header"
    }
]
```

* Listing Page:

```typescript
import { importUI } from '@magicjs.dev/frontend';

const Header = importUI("@mern.ai/header");

return (
    <div>
        <Header />
        <div>
            {/* Other components */}
        </div>
    </div>
);
```

[Click here to refer GitHub.](https://github.com/skyslit/magicjs.dev/blob/main/packages/frontend/src/index.tsx#L460)