shadcn.io is an independent project built on shadcn/ui
Preferences opens five checkbox rows under Editor Preferences: Auto-save, Spell Check, Line Numbers, Word Wrap, and Minimap.
Use it when editor toggles should be one click from the toolbar. The same choices beside the document can be a Switch. In Svelte, Ark UI does not keep the ticks across a reload.
Installation
Anatomy
Usage
<DropdownMenu><DropdownMenuTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline"><SettingsIcon aria-hidden="true" data-icon="inline-start" />Preferences</Button>{/snippet}</DropdownMenuTrigger><DropdownMenuContent class="w-56"><DropdownMenuGroup><DropdownMenuLabel>Editor Preferences</DropdownMenuLabel><DropdownMenuSeparator /><DropdownMenuCheckboxItem checked={autoSave} onCheckedChange={setAutoSave} value="auto-save">Auto-save</DropdownMenuCheckboxItem><DropdownMenuCheckboxItem checked={spellCheck} onCheckedChange={setSpellCheck} value="spell-check">Spell Check</DropdownMenuCheckboxItem><DropdownMenuCheckboxItem checked={lineNumbers} onCheckedChange={setLineNumbers} value="line-numbers">Line Numbers</DropdownMenuCheckboxItem><DropdownMenuCheckboxItem checked={wordWrap} onCheckedChange={setWordWrap} value="word-wrap">Word Wrap</DropdownMenuCheckboxItem><DropdownMenuCheckboxItem checked={minimap} onCheckedChange={setMinimap} value="minimap">Minimap</DropdownMenuCheckboxItem></DropdownMenuGroup></DropdownMenuContent></DropdownMenu>FAQ
Which preferences start on?
Auto-save, Spell Check and Word Wrap start checked; Line Numbers and Minimap start off.
Each DropdownMenuCheckboxItem takes checked, onCheckedChange, which receives a boolean, and a value.
What is Editor Preferences?
The DropdownMenuLabel that names the group, followed by a separator. It isn't a row you can pick.
What does the trigger look like?
An outline Button with a gear icon before the word Preferences. The menu is w-56.
Do these ticks survive closing the menu?
Yes. The checked state lives in the component, not in the menu, so it's the same when the menu reopens. Save it to the user's settings to keep it across reloads.
API Reference
Dropdown Menu
Sets checked={autoSave}, onCheckedChange={setAutoSave}, value="auto-save", checked={spellCheck}, onCheckedChange={setSpellCheck} and value="spell-check". The rest is on the Dropdown Menu page.
Button
Sets props and variant="outline". The rest is on the Button page.
