shadcn/ui

This example shows one way to define a shadcn/ui-style wrapper around SuperSelect.

export function ShadcnSuperSelect(props) {
    return (
        <SuperSelect
            {...props}
            customization={{
                classNamePrefix: "",
                modalSelectButton: {
                    component: ShadcnSelectButton,
                    selectedContent: {
                        component: ShadcnSelectedContent,
                        placeholder: "\u200B",
                    },
                },
                modal: {
                    component: ShadcnModalDialog,
                },
                searchInput: {
                    component: ShadcnSearchInput,
                    placeholder: "Search options",
                },
                optionListInput: {
                    component: ShadcnOptionListInput,
                },
                toggleButtonInput: {
                    component: ShadcnToggleButtonInput,
                },
                errorIndicator: {
                    component: ShadcnErrorIndicator,
                },
            }}
        />
    );
}

See website/src/components/shadcn-ui/ShadcnSuperSelect.tsx for the full source code of this example:

Display Mode

ModalOption ListToggle ButtonsNative

Single Select

Multi Select

Grouped Options

Loading State

Error State

Toolkit Modal + Modal Select