> ## 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.

# Quick start

> This will explain you how to use the databrain plugin and customization.

Note: This doc is deprecated for versions greater than v0.11.15

<Steps>
  <Step title="Install Databrain package">
    ```bash theme={"dark"}
    npm install @databrainhq/plugin
    ```
  </Step>

  <Step title="Import component">
    ```js theme={"dark"}
    import '@databrainhq/plugin/dist/style.css';
    import { Metric } from '@databrainhq/plugin';
    ```
  </Step>

  <Step title="Include the component">
    ```jsx theme={"dark"}
    <Metric token={token} metricId={metricId} />
    ```
  </Step>

  <Step title="Customizing the UI (Optional)">
    ```jsx theme={"dark"}
    <Metric
      token={token}
      metricId={metricId}
      onMinimize={() => setFullScreen(false)} // optional callback
      variant="card" // optional - card or fullscreen
      width={500}
      height={300}
      style={style}
      className={className}
      chartColors={["red", "blue", "orange", "..."]} // default is recharts colors
      theme={{
        colors: {
          background: "", primary: "", primaryLight: "", primaryDark: "",
          secondary: "", secondaryLight: "", secondaryDark: "",
          tertiary: "", tertiaryLight: "", tertiaryDark: "",
          error: "", errorLight: "", errorDark: "",
          warning: "", warningLight: "", warningDark: "",
          dark: "", light: "",
          gray50: "", gray100: "", gray200: "", gray300: "",
          gray400: "", gray500: "", gray600: "", gray700: "",
          gray800: "", gray900: ""
        },
        border: {
          radiusNone: "0", radiusDefault: "5px", radiusSm: "2px",
          radiusMd: "10px", radiusLg: "16px", radiusXl: "20px",
          radius2xl: "24px", radius3xl: "30px", radiusFull: "50%"
        },
        typography: {
          fontSize: "9px", fontFamily: "Inter",
          fontWeightThin: 200, fontWeightLight: 300, fontWeightRegular: 400,
          fontWeightSemibold: 500, fontWeightBold: 600,
          colorPrimary: "", colorSecondary: "", colorTertiary: ""
        },
        breakpoint: {
          xs: 360, sm: 512, md: 720, lg: 990, xl: 1280
        },
        metricLayoutCols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
        shadow: {
          primary: "", secondary: "", tertiary: ""
        }
      }}
    />
    ```
  </Step>
</Steps>