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

# Record widget

> Add a React widget to record pages in Attio

<img className="dark:hidden" width="720" height="440" noZoom src="https://mintcdn.com/attio/2EyaTyByKNPeSVcd/images/text-widget.png?fit=max&auto=format&n=2EyaTyByKNPeSVcd&q=85&s=905d99548719a1fe3fa5ed50327194c4" data-path="images/text-widget.png" />

<img className="hidden dark:block" width="720" height="440" noZoom src="https://mintcdn.com/attio/2EyaTyByKNPeSVcd/images/text-widget-dark.png?fit=max&auto=format&n=2EyaTyByKNPeSVcd&q=85&s=effd70a15c784e18ba183266c5b0dc5a" data-path="images/text-widget-dark.png" />

Add a record widget by creating an extension folder under `src/app/extensions/` whose `extension.tsx` default-exports a `defineExtension` call with `type: "record-widget"`. See [App structure](./overview) for the discovery rules.

<Note>
  Before your record widget will appear on a record page, you will need to go to "Configure page",
  click on "Add Widget", and select your widget.
</Note>

## Example

The widget component itself can live in a sibling file inside the extension folder:

```tsx src/app/extensions/company-arr/extension.tsx theme={"system"}
import React from "react"
import {Extensions, Widget} from "attio/client"

import {ArrWidgetContent} from "./arr-widget-content"

export default Extensions.defineExtension({
  type: "record-widget",
  id: "company-arr",
  label: "ARR",
  Widget: ({recordId}) => (
    <React.Suspense fallback={<Widget.Loading />}>
      <ArrWidgetContent recordId={recordId} />
    </React.Suspense>
  ),
  objects: "companies", // only show on company records
})
```

```tsx src/app/extensions/company-arr/arr-widget-content.tsx theme={"system"}
import React from "react"
import {Widget, Badge} from "attio/client"

import {useMyArrQuery} from "./use-my-arr-query"

export const ArrWidgetContent = ({recordId}: {recordId: string}) => {
  const {arr, delta} = useMyArrQuery(recordId) // may suspend!
  return (
    <Widget.TextWidget>
      <Widget.Title>ARR</Widget.Title>
      <Widget.Text.Primary>{arr}</Widget.Text.Primary>
      <Widget.Decoration>
        <Badge color={delta < 0 ? "red" : "green"}>{delta}</Badge>
      </Widget.Decoration>
    </Widget.TextWidget>
  )
}
```

<Note>
  The widget will always display your app's icon, which you set in the [Developer
  dashboard](https://build.attio.com).
</Note>

## Arguments

<ParamField path="type" type="&#x22;record-widget&#x22;" required>
  Identifies this extension as a record widget.
</ParamField>

<ParamField path="id" type="string" required>
  The unique identifier for this widget.

  It is only used internally; never shown to the user.
</ParamField>

<ParamField path="label" type="string" required>
  A human-readable label of the widget that will be shown to the user in the widget picker.
</ParamField>

<ParamField path="color" type="string">
  The base hexadecimal color of the gradient displayed in the background of the widget.
</ParamField>

<ParamField path="Widget" type="(props: { recordId: string, object: ObjectSlug }) => React.ReactNode" required>
  A React component that will render the widget.

  It can suspend while loading data.

  Must return one of the following components as the root element:

  * [`Widget.Loading`](../components/widgets/loading)
  * [`Widget.TextWidget`](../components/widgets/text-widget)
</ParamField>

<ParamField path="objects" type="ObjectSlug | Array<ObjectSlug> | (recordInfo) => boolean">
  A single slug, an array of slugs, or a predicate to select which types of record the record
  widget will apply to. The predicate receives `{attributes, object, isStandard}` for the record
  and returns whether the widget should be shown.

  Defaults to `undefined`, which will cause the widget to show on ***all*** types of records.

  The built-in slugs are

  * [`"companies"`](../../docs/standard-objects/standard-objects-companies)
  * [`"people"`](../../docs/standard-objects/standard-objects-people)
  * [`"deals"`](../../docs/standard-objects/standard-objects-deals)
  * [`"users"`](../../docs/standard-objects/standard-objects-users)
  * [`"workspaces"`](../../docs/standard-objects/standard-objects-workspaces)
</ParamField>