---
title: Visualization item – Package and import
url: https://developer.luzmo.com/guide/ack--components--chart-rendering--luzmo-embed-viz-item--package-and-import
type: guide
parent: https://developer.luzmo.com/guide/ack--components--chart-rendering--luzmo-embed-viz-item.md
---

## Package and import

Install the **framework-specific** Luzmo embed package alongside `@luzmo/analytics-components-kit`. Use `@luzmo/embed` only for vanilla web apps — in React or Angular, install the matching wrapper package instead.

| Framework | NPM package | Viz item component |
| --- | --- | --- |
| Web (HTML / JS) | `@luzmo/embed` | `<luzmo-embed-viz-item>` — `import '@luzmo/embed'` |
| React | `@luzmo/react-embed` | `<LuzmoVizItemComponent>` from `@luzmo/react-embed` |
| Angular | `@luzmo/ngx-embed` | `<luzmo-viz-item>` — `NgxLuzmoVizItemComponent` |
| Vue | `@luzmo/vue-embed` | `<luzmo-viz-item>` — register with `app.use(VueLuzmo)` from `@luzmo/vue-embed` |
| React Native | `@luzmo/react-native-embed` | `<LuzmoVizItemComponent>` from `@luzmo/react-native-embed` |

The `type`, `slots`, `options`, `filters`, and auth properties are the same on every variant; only the tag name and binding syntax differ. See [Install a Luzmo component](/guide/dashboard-embedding--embed-into-application.md) and [Flex quick start — Basic usage](/guide/flex--introduction.md) for full setup steps.

1. Install the embed package for your framework:

:::langSpecific{lang=web type=frontend}

```shell
---
type: command
switcher: true
switcherLanguage: web
switcherType: frontend
---
npm i @luzmo/embed
```

:::

:::langSpecific{lang=angular type=frontend}

```shell
---
type: command
switcher: true
switcherLanguage: angular
switcherType: frontend
---
npm i @luzmo/ngx-embed
```

:::

:::langSpecific{lang=react type=frontend}

```shell
---
type: command
switcher: true
switcherLanguage: react
switcherType: frontend
---
npm i @luzmo/react-embed
```

:::

:::langSpecific{lang=reactnative type=frontend}

```shell
---
type: command
switcher: true
switcherLanguage: reactnative
switcherType: frontend
---
npm i @luzmo/react-native-embed
```

:::

:::langSpecific{lang=vue type=frontend}

```shell
---
type: command
switcher: true
switcherLanguage: vue
switcherType: frontend
---
npm i @luzmo/vue-embed
```

:::

2. Import and use the viz item component:

:::langSpecific{lang=web type=frontend}

Import the web component, then use `<luzmo-embed-viz-item>` in HTML:

```javascript
---
type: file
fileName: index.js
switcher: true
switcherLanguage: web
switcherType: frontend
---
import '@luzmo/embed';
```

If your app does not use npm, load a pinned CDN build (see [Install a Luzmo component — Web](/guide/dashboard-embedding--embed-into-application.md)):

```html
---
type: file
fileName: index.html
switcher: true
switcherLanguage: web
switcherType: frontend
---
<!--
Retrieve the current version from:
https://cdn.luzmo.com/js/luzmo-embed/latest-version.json
Pin a specific <WEB_COMPONENT_VERSION> in production.
-->
<script
  defer
  src="https://cdn.luzmo.com/js/luzmo-embed/<WEB_COMPONENT_VERSION>/luzmo-embed.min.js"
  charset="utf-8">
</script>
```

:::

:::langSpecific{lang=angular type=frontend}

Import `NgxLuzmoVizItemComponent` in your standalone Angular component, then use `<luzmo-viz-item>` in your template:

```typescript
---
type: file
fileName: app.component.ts
switcher: true
switcherLanguage: angular
switcherType: frontend
---
import { NgxLuzmoVizItemComponent } from '@luzmo/ngx-embed';

@Component({
  imports: [NgxLuzmoVizItemComponent],
})
```

```html
---
type: file
fileName: app.component.html
switcher: true
switcherLanguage: angular
switcherType: frontend
---
<luzmo-viz-item
  type="bar-chart"
  [slots]="slotsContents"
  [options]="options"
  [filters]="filters"
  [authKey]="'your-auth-key'"
  [authToken]="'your-auth-token'">
</luzmo-viz-item>
```

:::

:::langSpecific{lang=react type=frontend}

```javascript
---
type: file
fileName: VizItem.tsx
switcher: true
switcherLanguage: react
switcherType: frontend
---
import { LuzmoVizItemComponent } from '@luzmo/react-embed';

// Pass ACK state (type, slots, options, filters) as props:
<LuzmoVizItemComponent
  type="bar-chart"
  slots={slotsContents}
  options={options}
  filters={filters}
  authKey="your-auth-key"
  authToken="your-auth-token"
/>
```

:::

:::langSpecific{lang=vue type=frontend}

Register the plugin, then use `<luzmo-viz-item>` in your template:

```javascript
---
type: file
fileName: main.js
switcher: true
switcherLanguage: vue
switcherType: frontend
---
import { createApp } from 'vue';
import App from './App.vue';
import VueLuzmo from '@luzmo/vue-embed';

const app = createApp(App);

app.use(VueLuzmo);

app.mount('#app');
```

```html
---
type: file
fileName: Dashboard.vue
switcher: true
switcherLanguage: vue
switcherType: frontend
---
<template>
  <luzmo-viz-item
    type="bar-chart"
    :slots="slotsContents"
    :options="options"
    :filters="filters"
    authKey="your-auth-key"
    authToken="your-auth-token"
  />
</template>
```

:::

:::langSpecific{lang=reactnative type=frontend}

```javascript
---
type: file
fileName: VizItem.tsx
switcher: true
switcherLanguage: reactnative
switcherType: frontend
---
import { LuzmoVizItemComponent } from '@luzmo/react-native-embed';

<LuzmoVizItemComponent
  type="bar-chart"
  slots={slotsContents}
  options={options}
  filters={filters}
  authKey="your-auth-key"
  authToken="your-auth-token"
/>
```

:::


---

**Navigation**: [↑ Visualization item](https://developer.luzmo.com/guide/ack--components--chart-rendering--luzmo-embed-viz-item.md) | [Connecting ACK output to the viz item →](https://developer.luzmo.com/guide/ack--components--chart-rendering--luzmo-embed-viz-item--connecting-ack-output-to-the-viz-item.md)


---

## Sitemap

- [Official best practices and implementation guidelines](https://developer.luzmo.com/AGENTS.md)
- [Overview of all docs pages](https://developer.luzmo.com/llms.txt)
- [Full index of all documentation](https://developer.luzmo.com/llms-full.txt): Complete list of every doc page in markdown format with descriptions — use to discover relevant docs from user queries