> ## 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.defineWorkspacePage()

> Define the workspace settings page of your app

`Settings.defineWorkspacePage()` defines the page where workspace admins configure your app's settings. It takes the [settings schema](./define-workspace-schema) and a render callback.

## File location

The page must be the **default export** of a file in `src/app/settings/`, conventionally `src/app/settings/page.tsx`, so the CLI can discover it.

## Example

```tsx src/app/settings/page.tsx theme={"system"}
import React from "react"
import {Settings} from "attio/client"

import schema from "./schema"

export default Settings.defineWorkspacePage(schema, () => {
  const {Form, TextInput} = Settings.useForm(schema)

  return (
    <Form>
      <TextInput label="Team name" name="team_name" />
    </Form>
  )
})
```

Inside the callback, call [`Settings.useForm`](./use-form) with the same schema to get form components typed against it.

## Arguments

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

<ParamField path="render" type="() => React.ReactNode" required>
  A render callback returning the settings form. Use [`Settings.useForm`](./use-form) inside it,
  and wrap the inputs in the `<Form>` component it returns.
</ParamField>

## Related

* [Workspace settings overview](./overview)
* [Adding workspace settings guide](../guides/adding-workspace-settings)
* [Settings form components](../components/workspace-settings/form)