> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nebuly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Usage with TypeScript

> How to support our web components with TypeScript

Some frameworks, like React and Vue, don't support custom HTML elements out of the box. \
To allow a smooth integration in a TypeScript project, our library exports the types for the components names and props in the `@nebuly-ai/reports/web` package.

```typescript theme={null}
import type  { NebulyChartComponentName, NebulyChartProps } from '@nebuly-ai/reports/web';
```

## React

In order to use the components as JSX elements, you need to define the types in the JSX namespace extending the `IntrinsicElements` interface.

<Tabs>
  <Tab title="Version 18+" icon="react">
    ```typescript theme={null}
    import "react";
    import {
      NebulyChartComponentName,
      NebulyChartProps,
    } from "@nebuly-ai/reports/web";

    declare module "react" {
      namespace JSX {
        interface IntrinsicElements
          extends Record<
            NebulyChartComponentName,
            React.DetailedHTMLProps<NebulyChartProps, HTMLElement>
          > {}
      }
    }
    ```
  </Tab>

  <Tab title="Before Version 18" icon="react">
    ```typescript theme={null}
    import {
      NebulyChartComponentName,
      NebulyChartProps,
    } from "@nebuly-ai/reports/web";

    declare global {
      namespace JSX {
        interface IntrinsicElements
          extends Record<
            NebulyChartComponentName,
            React.DetailedHTMLProps<NebulyChartProps, HTMLElement>
          > {}
      }
    }
    ```
  </Tab>
</Tabs>

## Vue

In order to use the components as Vue components, you need to define them extending the `GlobalComponents` interface.

```typescript theme={null}
import {
  NebulyChartComponentName,
  NebulyChartProps,
} from "@nebuly-ai/reports/web";

declare module 'vue' {
  interface GlobalComponents extends Record<NebulyChartComponentName, NebulyChartProps> {}
}
```

## Angular, Svelte and other frameworks that support raw HTML templates

These frameworks don't require any special setup to use the components since templates are raw HTML.

```html theme={null}
<nebuly-line-chart data="<CHART_DATA>" options="<CHART_OPTIONS>"></nebuly-line-chart>
```