Overview

React components for building BetterDiscord plugins

BdApi.Components provides a collection of React components that plugins can use to create consistent and polished user interfaces. These components follow Discord’s design patterns and integrate seamlessly with BetterDiscord’s settings system.

Component categories

BetterDiscord components are organized into three main categories:

Settings components

Components designed for building settings panels and configuration interfaces:

• ColorInput - Color picker with swatches
• DropdownInput - Dropdown select menu
• KeybindInput - Keybind recorder
• NumberInput - Number input with increment/decrement buttons
• RadioInput - Radio button group
• SearchInput - Search bar with clear button
• SliderInput - Slider with markers and units
• SwitchInput - Toggle switch
• TextInput - Text input field
• SettingItem - Container for individual settings
• SettingGroup - Collapsible group of settings

UI elements

General-purpose components for building interfaces:

• Text - Styled text with color and size variants
• Flex - Flexbox container with alignment utilities
• Button - Button with multiple styles and colors
• Spinner - Loading spinner with animation types
• Tooltip - Discord’s tooltip component for hover tips
• ErrorBoundary - Error boundary for catching React errors

Basic usage

All components are accessed through BdApi.Components:

const {Button, Text, SwitchInput} = BdApi.Components;

function MyComponent() {
    const [enabled, setEnabled] = React.useState(false);

    return (
        <div>
            <Text color={Text.Colors.HEADER_PRIMARY} size={Text.Sizes.SIZE_16}>
                My Settings
            </Text>
            <SwitchInput value={enabled} onChange={setEnabled} />
            <Button onClick={() => console.log('Clicked!')}>
                Save
            </Button>
        </div>
    );
}

Common patterns

Building settings panels

Use SettingItem to wrap individual settings with labels and descriptions:

const {SettingItem, SwitchInput, SliderInput} = BdApi.Components;

function SettingsPanel() {
    return (
        <div>
            <SettingItem
                id="enable-feature"
                name="Enable feature"
                note="Toggles the main feature on or off"
                inline
            >
                <SwitchInput value={enabled} onChange={setEnabled} />
            </SettingItem>

            <SettingItem
                id="volume-level"
                name="Volume level"
                note="Adjust the volume from 0 to 100"
            >
                <SliderInput
                    value={volume}
                    min={0}
                    max={100}
                    onChange={setVolume}
                    units="%"
                />
            </SettingItem>
        </div>
    );
}

Using SettingGroup

Group related settings together with collapsible sections:

const {SettingGroup} = BdApi.Components;

function MySettings() {
    const settings = [
        {
            type: "switch",
            id: "feature1",
            name: "Feature 1",
            note: "Enable feature 1",
            value: false,
            onChange: (value) => console.log(value)
        },
        {
            type: "slider",
            id: "intensity",
            name: "Intensity",
            note: "Adjust intensity level",
            value: 50,
            min: 0,
            max: 100,
            onChange: (value) => console.log(value)
        }
    ];

    return (
        <SettingGroup
            id="my-group"
            name="General Settings"
            settings={settings}
            collapsible
        />
    );
}

Error boundaries

Wrap components in an ErrorBoundary to handle errors gracefully:

const {ErrorBoundary} = BdApi.Components;

function MyPlugin() {
    return (
        <ErrorBoundary
            id="my-plugin"
            name="MyPlugin"
            onError={(error) => console.error('Error:', error)}
        >
            <MyComponent />
        </ErrorBoundary>
    );
}

Next steps

• Explore Settings components for building configuration interfaces
• Learn about UI elements for general interface building
• See the UI namespace for additional UI utilities