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

# Settings and UI

> Use settings schemas, Discord UI components, toasts, modals, and ErrorBoundary in Illegalcord plugins.

Illegalcord plugins should reuse the UI and helper APIs already exposed by the project. Avoid hand-rolled controls when Discord or the local component library already provides one.

## Settings

Use `definePluginSettings` from `@api/Settings` and `OptionType` from `@utils/types`.

```typescript theme={null}
import { definePluginSettings } from "@api/Settings";
import { OptionType } from "@utils/types";

const settings = definePluginSettings({
    enabled: {
        type: OptionType.BOOLEAN,
        description: "Enable the feature.",
        default: true
    },
    label: {
        type: OptionType.STRING,
        description: "Text shown by the feature.",
        default: "Hello"
    }
});
```

Read settings in runtime code with `settings.store`. In React components, subscribe only to the keys you need:

```typescript theme={null}
const KEYS = ["enabled", "label"] as const;

function SettingsPreview() {
    const values = settings.use(KEYS);
    return <span>{values.enabled ? values.label : "Disabled"}</span>;
}
```

## Toasts

Use Discord's toast helpers from `@webpack/common`:

```typescript theme={null}
import { showToast, Toasts } from "@webpack/common";

showToast("Settings saved.", Toasts.Type.SUCCESS);
showToast("Could not save settings.", Toasts.Type.FAILURE);
```

## Modals

Use modal helpers from `@utils/modal` and Discord or local components for controls.

```tsx theme={null}
import { ModalContent, ModalHeader, ModalRoot, openModal } from "@utils/modal";
import { Button, Text } from "@webpack/common";

function openExampleModal() {
    openModal(props => (
        <ModalRoot {...props}>
            <ModalHeader>Example</ModalHeader>
            <ModalContent>
                <Text variant="text-md/normal">Hello from a plugin modal.</Text>
                <Button onClick={props.onClose}>Close</Button>
            </ModalContent>
        </ModalRoot>
    ));
}
```

## Injected React components

Wrap injected render functions with `ErrorBoundary.wrap`.

```tsx theme={null}
import ErrorBoundary from "@components/ErrorBoundary";
import { EquicordDevs } from "@utils/constants";
import definePlugin from "@utils/types";

function ExampleDecoration() {
    return <span>Example</span>;
}

export default definePlugin({
    name: "DecorationExample",
    description: "Shows an injected decoration example.",
    authors: [EquicordDevs.irritably],

    renderMessageDecoration: {
        render: ErrorBoundary.wrap(ExampleDecoration, { noop: true })
    }
});
```

## UI imports

| Need                                             | Prefer                                                 |
| ------------------------------------------------ | ------------------------------------------------------ |
| React and hooks                                  | `@webpack/common`                                      |
| Button, input, select, checkbox, slider, tooltip | `@webpack/common` or existing `@components/*` wrappers |
| Modal primitives                                 | `@utils/modal`                                         |
| Settings cards and tabs                          | `@components/settings`                                 |
| Class name factory                               | `classNameFactory` from `@utils/css`                   |
| Class merging                                    | `classes` from `@utils/misc`                           |

<Warning>
  Do not import React from `react` in plugin UI. Use React and hooks from `@webpack/common`.
</Warning>