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

# Settings.useSettings()

> A hook for accessing workspace settings values in your app

`Settings.useSettings()` provides real-time access to your app's workspace settings in React components. It automatically subscribes to settings updates, so your components will always reflect the current configuration.

```tsx theme={"system"}
import {Settings} from "attio/client"
```

## Parameters

<ParamField path="schema" type="WorkspaceSettingsSchema" required>
  The schema built with [`Settings.defineWorkspaceSchema`](./define-workspace-schema), imported
  from your schema file.
</ParamField>

## Returns

An object containing all workspace settings values, fully typed based on your schema definition. Every value is `null` until it has been set.

## Example

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

import schema from "../../settings/schema"

export default Extensions.defineExtension({
  type: "record-widget",
  id: "sync-status",
  label: "Sync Status",
  Widget: () => {
    const settings = Settings.useSettings(schema)

    // Access settings values with full type safety.
    // This automatically updates when settings change.
    if (!settings.auto_sync_enabled) {
      return (
        <Widget.TextWidget>
          <Widget.Title>Sync Disabled</Widget.Title>
          <Widget.Text.Primary>Enable auto-sync in workspace settings</Widget.Text.Primary>
        </Widget.TextWidget>
      )
    }

    return (
      <Widget.TextWidget>
        <Widget.Title>Sync Active</Widget.Title>
        <Widget.Text.Primary>
          Syncing every {settings.sync_interval_minutes} minutes
        </Widget.Text.Primary>
      </Widget.TextWidget>
    )
  },
})
```

## Type safety

The hook's return type is automatically inferred from your schema:

```ts src/app/settings/schema.ts theme={"system"}
import {Settings} from "attio"

export default Settings.defineWorkspaceSchema({
  team_name: Settings.Schema.string(),
  auto_sync_enabled: Settings.Schema.boolean(),
  sync_interval_minutes: Settings.Schema.number(),
})
```

```tsx theme={"system"}
// TypeScript knows the exact shape of settings
const settings = Settings.useSettings(schema)

settings.team_name // string | null
settings.auto_sync_enabled // boolean | null
settings.sync_interval_minutes // number | null
settings.nonexistent // TypeScript error!
```

## Related

* [`Settings.getSettings()`](./get-settings) - Read settings outside React rendering
* [`Settings.useForm()`](./use-form) - Build the settings page form