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

# Workspace settings

> Add configurable workspace-level settings to your app

<img className="dark:hidden" width="720" height="440" noZoom src="https://mintcdn.com/attio/jXl5_SFM_Le7vWWN/images/workspace-settings-entry-point.png?fit=max&auto=format&n=jXl5_SFM_Le7vWWN&q=85&s=ba72a54e57db4c9cd12378d186988e35" data-path="images/workspace-settings-entry-point.png" />

<img className="hidden dark:block" width="720" height="440" noZoom src="https://mintcdn.com/attio/jXl5_SFM_Le7vWWN/images/workspace-settings-entry-point-dark.png?fit=max&auto=format&n=jXl5_SFM_Le7vWWN&q=85&s=70316258ee3dffec2b7160506a3bd283" data-path="images/workspace-settings-entry-point-dark.png" />

Workspace settings allow users to configure your app at the workspace level. Settings are displayed in the app's details page and are automatically saved when users make changes.

<Note>
  Only workspace admins can edit workspace settings. However, all workspace members can view the
  settings.
</Note>

To add workspace settings, define a [workspace settings schema](../settings/app-settings-schema) at `src/app.settings.ts`, create a workspace settings object with a `Page`, and register it in `app.ts`.

## Example

First, define your settings schema:

```typescript app.settings.ts theme={"system"}
import {Settings, type SettingsSchema} from "attio"

const appSettingsSchema = {
  workspace: {
    team_name: Settings.string(),
    auto_sync_enabled: Settings.boolean(),
    sync_interval_minutes: Settings.number(),
  },
} satisfies SettingsSchema

export default appSettingsSchema
```

Then create your workspace settings page to display these settings in a configurable form:

```tsx workspace-settings.tsx theme={"system"}
import React from "react"
import {useWorkspaceSettingsForm} from "attio/client"
import type {App} from "attio"

export const workspaceSettings: App.Settings.Workspace = {
  Page,
}

function Page() {
  const {Form, Section, TextInput, Toggle, NumberInput} = useWorkspaceSettingsForm()

  return (
    <Form>
      <Section title="General">
        <TextInput label="Team name" name="team_name" />
      </Section>

      <Section title="Sync Settings">
        <Toggle label="Enable automatic sync" name="auto_sync_enabled" />
        <NumberInput
          label="Sync interval (minutes)"
          name="sync_interval_minutes"
          min={5}
          max={1440}
        />
      </Section>
    </Form>
  )
}
```

Finally, register it in your `app.ts`:

```tsx app.ts theme={"system"}
import type {App} from "attio"
import {workspaceSettings} from "./workspace-settings"

export const app: App = {
  settings: {
    workspace: workspaceSettings,
  },
  // ...
}
```

## Type Safety

The schema provides type safety between your settings definitions and form components. For example:

* `TextInput`, `AttioUserCombobox`, and `Combobox` can only reference fields defined as `Settings.string()`
* `NumberInput` can only reference fields defined as `Settings.number()`
* `Toggle` and `Checkbox` can only reference fields defined as `Settings.boolean()`

TypeScript will show an error if you try to use a component with a mismatched field type.

## Arguments

<ParamField path="Page" type="() => React.ReactNode" required>
  A React component that renders the workspace settings page.

  Must use the [`useWorkspaceSettingsForm()`](../settings/use-workspace-settings-form) hook to create type-safe form components based on your [workspace settings schema](../settings/app-settings-schema).

  The component should return a `<Form>` component containing your settings inputs.
</ParamField>

## Related

* [Adding Workspace Settings Guide](../guides/adding-workspace-settings) - Step-by-step guide for adding workspace settings
* [`useWorkspaceSettings()`](../settings/use-workspace-settings) - Hook for accessing settings in React components
* [`getWorkspaceSettings()`](../settings/get-workspace-settings) - Get all settings in server actions
* [`getWorkspaceSetting()`](../settings/get-workspace-setting) - Get a single setting in server actions
* [`setWorkspaceSetting()`](../settings/set-workspace-setting) - Set a single setting in server actions
* [`useWorkspaceSettingsForm()`](../settings/use-workspace-settings-form) - Hook for creating the settings form
* [Workspace Settings Schema](../settings/app-settings-schema) - Define the structure and types of your settings
* [Settings Components](../components/workspace-settings/form) - Available form components for settings