import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

_NLUX_ comes with a default CSS theme that you can use to style the chat UI.
There are 2 ways to import the stylesheet, depending on your setup.

### Using JS Bundler

You can import it in your JS module by installing the `@nlux/themes` package:

<Tabs groupId="package" queryString>
    <TabItem value="npm" label="NPM">
        ```bash
        npm install @nlux/themes
        ```
    </TabItem>
    <TabItem value="yarn" label="Yarn">
        ```bash
        yarn add @nlux/themes
        ```
    </TabItem>
    <TabItem value="pnpm" label="PNPM">
        ```bash
        pnpm add @nlux/themes
        ```
    </TabItem>
</Tabs>

Then import the default theme `nova.css` in your webpage page or Javascript/Typescript file:

```tsx
import '@nlux/themes/nova.css';
```

This will require a CSS bundler such as Vite, or Webpack that's configured to handle CSS imports **for global
styles**. Most modern bundlers are configured to handle CSS imports.

### Using HTML Link Tag

Alternatively, you can include the CSS stylesheet in your HTML file.<br />
We provide a CDN link that you can use to include the stylesheet in your HTML file:

```html
<link rel="stylesheet" href="https://themes.nlux.ai/v1.0.0/nova.css" />
```

This CDN link is **not meant for production use**, and it is only provided for convenience.
Make sure you replace it with the latest version of the stylesheet before deploying your app to production.