> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usedatabrain.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Nextjs
## @databrainhq/plugin
> Databrain app ui web component plugin.
v0.15.135-uat
Enforced using StandardJS styleguide.
## Install
```bash theme={"dark"}
npm install @databrainhq/plugin
```
## Github Repo Link
View the complete Next.js integration example on GitHub
## Usage
### Quick usage:
```tsx theme={"dark"}
"use client";
import '@databrainhq/plugin/web';
export default function Home() {
const url = new URL(location.href);
const token = url.searchParams.get("token");
const dashboardId = url.searchParams.get("dashboardId");
return (
);
}
declare global {
namespace JSX {
interface IntrinsicElements {
"dbn-dashboard": any;
"dbn-metric": any;
}
}
}
```
For embedding a Metric Card you can use the `dbn-metric` webcomponent:
```html theme={"dark"}
```
* To find dashboardId please see here.
* To find metricId please see here.
## Token
The [`token`](https://docs.usedatabrain.com/developer-docs/token) should be a guest token, fetched from your backend based on the current user's login information. You can see more [about it here](https://docs.usedatabrain.com/developer-docs/token).
Here is an example with sample token and dashboardId that you can use in your frontend app to get started without a backend.
```html theme={"dark"}
```
### **Breakdown:**
Import the library main or index or App or layout file
```js theme={"dark"}
import '@databrainhq/plugin/web';
```
Once the library is imported, the web-components `dbn-dashboard`, `dbn-metrics` are available to use anywhere inside your app. And you can use it anywhere in your app like:
```tsx theme={"dark"}
const Example = () => {
return (
);
};
```
## Integrating metric
```tsx theme={"dark"}
const Example = () => {
return (
);
};
```
To see the full list of options please check the [options list](https://docs.usedatabrain.com/developer-docs/helpers/options).