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

# Settings panels

> Ready-made AppSettings and WidgetSettings panels for your app's settings screen.

Two panels cover what the owner controls about your app on their profile. Both get their options and validation from the server, so your app does not need to know what the settings are.

```tsx theme={null}
import { AppSettings, WidgetSettings, Stack } from '@cskn/ui';
import { closeApp } from '@cskn/sdk';

function SettingsScreen({ locale, t }: Props) {
  return (
    <Stack gap={28}>
      <AppSettings
        locale={locale}
        onDeactivated={() => closeApp()}
        labels={{ heading: t('app_settings_heading') }}
      />
      <WidgetSettings labels={{ heading: t('widgets_heading') }} />
    </Stack>
  );
}
```

Both default to the current app's slug. If the app is not active on the owner's profile, the panel says so first and disables saving.

## AppSettings

How your app appears on the owner's page: its name and description there, its address (`username.cskn.my/app-slug`, copyable), whether it shows on the profile, who may open it (public, followers, or private with an allow list), comments, and removing it.

<ParamField path="appSlug" type="string">Defaults to the current app.</ParamField>
<ParamField path="locale" type="string">Language to show the app's name in. Pass your i18n's current language.</ParamField>
<ParamField path="labels" type="object">Text overrides for every string in the panel.</ParamField>

<ParamField path="sections" type="('identity' | 'portfolio' | 'comments' | 'visibility' | 'deactivate')[]">
  Show only these sections. Saving sends only what the owner edited, so hidden settings are never written.
</ParamField>

<ParamField path="hideComments" type="boolean">Drop the comments row, for an app without comments.</ParamField>
<ParamField path="hideDeactivate" type="boolean">Drop the remove-from-profile row.</ParamField>
<ParamField path="onDeactivated" type="() => void">Called after the app was removed. In a shell, `closeApp()` is the usual choice.</ParamField>

## WidgetSettings

Which of your app's widgets appear on the profile, their size, position and title.

<ParamField path="appSlug" type="string">Defaults to the current app.</ParamField>
<ParamField path="labels" type="object">Text overrides.</ParamField>

## Your own design

If your app has its own design language, use the SDK hooks behind these panels and render the same behavior with your components: [`useAppSettings`](/sdk/app-settings) and [`useWidgetSettings`](/sdk/widgets#settings-screen).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.