Skip to main content
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.
Only workspace admins can edit workspace settings. However, all workspace members can view the settings.
To add workspace settings, define a workspace settings schema at src/app.settings.ts, create a workspace settings object with a Page, and register it in app.ts.
The Workspace Settings API is experimental and may change in the future. Please don’t use it in production versions of your app.

​
Example

First, define your settings schema:
app.settings.ts
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:
workspace-settings.tsx
import React from "react";
import { experimental_useWorkspaceSettingsForm } from "attio/client";
import type { App } from "attio";

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

function Page() {
  const { Form, Section, TextInput, Toggle, NumberInput } = experimental_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:
app.ts
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

​
Page
() => React.ReactNode
required
A React component that renders the workspace settings page.Must use the experimental_useWorkspaceSettingsForm() hook to create type-safe form components based on your workspace settings schema.The component should return a <Form> component containing your settings inputs.