Tailwind CSS Settings Modal
A settings modal for Tailwind CSS. Use it to let people change their preferences in place, like appearance and account settings.
<button type="button" class="btn btn-outline" id="settings-modal-trigger">
Open Settings
</button>
<dialog class="dialog" data-sp-toggle="#settings-modal-trigger">
<div class="dialog-panel max-w-4xl gap-0 overflow-hidden p-0">
<div class="flex h-[640px] min-w-0 max-md:flex-col">
<aside
class="sidebar-static max-md:sidebar-static-row max-md:border-b md:border-e"
>
<header class="sidebar-header">
<h2 class="dialog-title px-2 md:sr-only">Settings</h2>
<button
type="button"
class="btn btn-ghost btn-sm btn-icon md:hidden"
data-sp-dismiss=""
aria-label="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
<div class="input-group sidebar-input max-md:hidden">
<input
class="input"
type="search"
placeholder="Search"
aria-label="Search settings"
/>
<div class="input-group-addon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m21 21-4.34-4.34"></path>
<circle cx="11" cy="11" r="8"></circle>
</svg>
</div>
</div>
</header>
<div class="sidebar-content scroll-fade">
<div class="sidebar-group">
<span class="sidebar-group-label">Settings</span>
<nav class="sidebar-menu">
<div class="sidebar-menu-item">
<a class="sidebar-menu-button active" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
></path>
<circle cx="12" cy="12" r="3"></circle></svg
><span>General</span></a
>
</div>
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<circle cx="12" cy="10" r="3"></circle>
<path
d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"
></path></svg
><span>Account</span></a
>
</div>
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
></path></svg
><span>Privacy</span></a
>
</div>
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="20" height="14" x="2" y="5" rx="2"></rect>
<line x1="2" x2="22" y1="10" y2="10"></line>
<path d="M6 14h2"></path></svg
><span>Billing</span></a
>
</div>
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m12 14 4-4"></path>
<path d="M3.34 19a10 10 0 1 1 17.32 0"></path></svg
><span>Usage</span></a
>
</div>
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle></svg
><span>Team</span></a
>
</div>
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect
width="18"
height="11"
x="3"
y="11"
rx="2"
ry="2"
></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg
><span>Security</span></a
>
</div>
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10.268 21a2 2 0 0 0 3.464 0"></path>
<path
d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
></path></svg
><span>Notifications</span></a
>
</div>
</nav>
</div>
<div class="sidebar-group">
<span class="sidebar-group-label">Customize</span>
<nav class="sidebar-menu">
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 8h.01"></path>
<path d="M12 12h.01"></path>
<path d="M14 8h.01"></path>
<path d="M16 12h.01"></path>
<path d="M18 8h.01"></path>
<path d="M6 8h.01"></path>
<path d="M7 16h10"></path>
<path d="M8 12h.01"></path>
<rect width="20" height="16" x="2" y="4" rx="2"></rect></svg
><span>Shortcuts</span></a
>
</div>
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 22v-5"></path>
<path d="M15 8V2"></path>
<path
d="M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"
></path>
<path d="M9 8V2"></path></svg
><span>Integrations</span></a
>
</div>
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"
></path></svg
><span>Plugins</span></a
>
</div>
</nav>
</div>
<div class="sidebar-group">
<span class="sidebar-group-label">Platform</span>
<nav class="sidebar-menu">
<div class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"
></path>
<circle
cx="16.5"
cy="7.5"
r=".5"
fill="currentColor"
></circle></svg
><span>API keys</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto text-muted-foreground"
>
<path d="M7 7h10v10"></path>
<path d="M7 17 17 7"></path></svg
></a>
</div>
</nav>
</div>
</div>
</aside>
<main class="flex min-w-0 flex-1 flex-col overflow-hidden">
<header
class="flex h-12 shrink-0 items-center justify-end px-3 max-md:hidden"
>
<button
type="button"
class="btn btn-ghost btn-sm btn-icon"
data-sp-dismiss=""
aria-label="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</header>
<div
class="field-group scroll-fade scrollbar scrollbar-sm flex-1 overflow-y-auto p-6 md:px-8 md:pt-2"
>
<fieldset class="field-set">
<legend class="field-legend">Appearance</legend>
<div role="list" class="item-group gap-0">
<div
class="item item-sm px-0 @max-md:flex-col @max-md:items-start"
>
<div class="item-content">
<div class="item-title" id="settings-modal-theme-title">
Theme
</div>
</div>
<div class="item-actions @max-md:w-full">
<div
role="radiogroup"
class="radio-segmented radio-segmented-sm @max-md:w-full"
aria-labelledby="settings-modal-theme-title"
>
<label class="radio-segment"
><input
type="radio"
name="settings-modal-theme"
checked=""
value="system"
/><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="20" height="14" x="2" y="3" rx="2"></rect>
<line x1="8" x2="16" y1="21" y2="21"></line>
<line x1="12" x2="12" y1="17" y2="21"></line></svg
><span class="sr-only">System</span></label
><label class="radio-segment"
><input
type="radio"
name="settings-modal-theme"
value="light"
/><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2"></path>
<path d="M12 20v2"></path>
<path d="m4.93 4.93 1.41 1.41"></path>
<path d="m17.66 17.66 1.41 1.41"></path>
<path d="M2 12h2"></path>
<path d="M20 12h2"></path>
<path d="m6.34 17.66-1.41 1.41"></path>
<path d="m19.07 4.93-1.41 1.41"></path></svg
><span class="sr-only">Light</span></label
><label class="radio-segment"
><input
type="radio"
name="settings-modal-theme"
value="dark"
/><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
></path></svg
><span class="sr-only">Dark</span></label
>
</div>
</div>
</div>
<div class="item-separator my-0"></div>
<div class="item item-sm px-0">
<div class="item-content">
<div class="item-title" id="settings-modal-font-title">
Font
</div>
</div>
<div class="item-actions">
<button
type="button"
class="btn btn-ghost btn-sm"
id="settings-modal-font"
aria-labelledby="settings-modal-font-title settings-modal-font"
>
<span data-value="">Sans serif</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-end text-muted-foreground"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
class="dropdown"
data-sp-toggle="#settings-modal-font"
data-sp-placement="bottom-end"
>
<div class="dropdown-label">Font</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-font"
checked=""
value="sans"
/>Sans serif
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-font"
value="serif"
/>Serif
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-font"
value="mono"
/>Monospace
</div>
</div>
</div>
</div>
<div class="item-separator my-0"></div>
<div
class="item item-sm px-0 @max-md:flex-col @max-md:items-start"
>
<div class="item-content">
<div class="item-title" id="settings-modal-text-size-title">
Text size
</div>
<p class="item-description">
Size of the text in conversations.
</p>
</div>
<div class="item-actions @max-md:w-full">
<div
role="radiogroup"
class="radio-segmented radio-segmented-sm @max-md:w-full"
aria-labelledby="settings-modal-text-size-title"
>
<label class="radio-segment"
><input
type="radio"
name="settings-modal-text-size"
value="small"
/><span>Small</span></label
><label class="radio-segment"
><input
type="radio"
name="settings-modal-text-size"
checked=""
value="medium"
/><span>Medium</span></label
><label class="radio-segment"
><input
type="radio"
name="settings-modal-text-size"
value="large"
/><span>Large</span></label
>
</div>
</div>
</div>
<div class="item-separator my-0"></div>
<div
class="item item-sm px-0 @max-md:flex-col @max-md:items-start"
>
<div class="item-content">
<div class="item-title" id="settings-modal-width-title">
Content width
</div>
<p class="item-description">
Maximum width of the main column.
</p>
</div>
<div class="item-actions @max-md:w-full">
<div
role="radiogroup"
class="radio-segmented radio-segmented-sm @max-md:w-full"
aria-labelledby="settings-modal-width-title"
>
<label class="radio-segment"
><input
type="radio"
name="settings-modal-width"
checked=""
value="narrow"
/><span>Narrow</span></label
><label class="radio-segment"
><input
type="radio"
name="settings-modal-width"
value="medium"
/><span>Medium</span></label
><label class="radio-segment"
><input
type="radio"
name="settings-modal-width"
value="wide"
/><span>Wide</span></label
>
</div>
</div>
</div>
<div class="item-separator my-0"></div>
<div
class="item item-sm px-0 @max-md:flex-col @max-md:items-start"
>
<div class="item-content">
<div class="item-title" id="settings-modal-motion-title">
Motion
</div>
<p class="item-description">
Reduce animation in the interface.
</p>
</div>
<div class="item-actions @max-md:w-full">
<div
role="radiogroup"
class="radio-segmented radio-segmented-sm @max-md:w-full"
aria-labelledby="settings-modal-motion-title"
>
<label class="radio-segment"
><input
type="radio"
name="settings-modal-motion"
checked=""
value="system"
/><span>System</span></label
><label class="radio-segment"
><input
type="radio"
name="settings-modal-motion"
value="reduced"
/><span>Reduced</span></label
>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="field-set">
<legend class="field-legend">Language and region</legend>
<div role="list" class="item-group gap-0">
<div class="item item-sm px-0">
<div class="item-content">
<div class="item-title" id="settings-modal-language-title">
Language
</div>
</div>
<div class="item-actions">
<button
type="button"
class="btn btn-ghost btn-sm"
id="settings-modal-language"
aria-labelledby="settings-modal-language-title settings-modal-language"
>
<span data-value="">English</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-end text-muted-foreground"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
class="dropdown"
data-sp-toggle="#settings-modal-language"
data-sp-placement="bottom-end"
>
<div class="dropdown-label">Language</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-language"
checked=""
value="en"
/>English
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-language"
value="sv"
/>Swedish
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-language"
value="de"
/>German
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-language"
value="fr"
/>French
</div>
</div>
</div>
</div>
<div class="item-separator my-0"></div>
<div class="item item-sm px-0">
<div class="item-content">
<div class="item-title" id="settings-modal-timezone-title">
Time zone
</div>
</div>
<div class="item-actions">
<button
type="button"
class="btn btn-ghost btn-sm"
id="settings-modal-timezone"
aria-labelledby="settings-modal-timezone-title settings-modal-timezone"
>
<span data-value="">Stockholm</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-end text-muted-foreground"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
class="dropdown"
data-sp-toggle="#settings-modal-timezone"
data-sp-placement="bottom-end"
>
<div class="dropdown-label">Time zone</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-timezone"
checked=""
value="stockholm"
/>Stockholm
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-timezone"
value="london"
/>London
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-timezone"
value="new-york"
/>New York
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-timezone"
value="tokyo"
/>Tokyo
</div>
</div>
</div>
</div>
<div class="item-separator my-0"></div>
<div class="item item-sm px-0">
<div class="item-content">
<div class="item-title" id="settings-modal-date-title">
Date format
</div>
</div>
<div class="item-actions">
<button
type="button"
class="btn btn-ghost btn-sm"
id="settings-modal-date"
aria-labelledby="settings-modal-date-title settings-modal-date"
>
<span data-value="">2026-10-16</span
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-end text-muted-foreground"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
class="dropdown"
data-sp-toggle="#settings-modal-date"
data-sp-placement="bottom-end"
>
<div class="dropdown-label">Date format</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-date"
checked=""
value="ymd"
/>2026-10-16
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-date"
value="dmy"
/>16/10/2026
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="settings-modal-date"
value="mdy"
/>10/16/2026
</div>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="field-set">
<legend class="field-legend">Notifications</legend>
<div role="list" class="item-group gap-0">
<div class="item item-sm px-0">
<div class="item-content">
<div class="item-title" id="settings-modal-digest-title">
Email digest
</div>
<p class="item-description">
A summary of activity, sent every morning.
</p>
</div>
<div class="item-actions">
<input
type="checkbox"
role="switch"
class="switch"
id="settings-modal-digest"
aria-labelledby="settings-modal-digest-title"
checked=""
/>
</div>
</div>
<div class="item-separator my-0"></div>
<div class="item item-sm px-0">
<div class="item-content">
<div class="item-title" id="settings-modal-push-title">
Push notifications
</div>
<p class="item-description">
Get notified when a long task has finished.
</p>
</div>
<div class="item-actions">
<input
type="checkbox"
role="switch"
class="switch"
id="settings-modal-push"
aria-labelledby="settings-modal-push-title"
/>
</div>
</div>
<div class="item-separator my-0"></div>
<div class="item item-sm px-0">
<div class="item-content">
<div class="item-title" id="settings-modal-sounds-title">
Sounds
</div>
<p class="item-description">
Play a sound with each notification.
</p>
</div>
<div class="item-actions">
<input
type="checkbox"
role="switch"
class="switch"
id="settings-modal-sounds"
aria-labelledby="settings-modal-sounds-title"
/>
</div>
</div>
</div>
</fieldset>
</div>
</main>
</div>
<script>
{
const dialog = document.currentScript.closest("dialog");
dialog.addEventListener("click", (event) => {
const item = event.target.closest(".dropdown-item-radio");
if (!item) return;
const menu = item.closest(".dropdown");
dialog.querySelector(
menu.dataset.spToggle + " [data-value]",
).textContent = item.textContent.trim();
setTimeout(() => window.sp?.dropdown(menu)?.hide(), 150);
});
}
</script>
</div>
</dialog>