diff --git a/web/package.json b/web/package.json
index 5cbc0423..289096cf 100644
--- a/web/package.json
+++ b/web/package.json
@@ -49,6 +49,8 @@
 		"@atcute/client": "^5.1.1",
 		"@atcute/identity-resolver": "^2.0.1",
 		"@atcute/lexicons": "^2.0.2",
-		"@atcute/oauth-browser-client": "^4.0.1"
+		"@atcute/oauth-browser-client": "^4.0.1",
+		"tailwind-merge": "^3.6.0",
+		"tailwind-variants": "^3.2.2"
 	}
 }
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 7279816c..d3a7e468 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -23,6 +23,12 @@ importers:
       '@atcute/oauth-browser-client':
         specifier: ^4.0.1
         version: 4.0.1(@atcute/identity-resolver@2.0.1(@atcute/identity@2.0.1(@atcute/lexicons@2.0.2)(typescript@6.0.3))(@atcute/lexicons@2.0.2)(typescript@6.0.3))(@atcute/lexicons@2.0.2)(typescript@6.0.3)
+      tailwind-merge:
+        specifier: ^3.6.0
+        version: 3.6.0
+      tailwind-variants:
+        specifier: ^3.2.2
+        version: 3.2.2(tailwind-merge@3.6.0)(tailwindcss@4.3.2)
     devDependencies:
       '@eslint/js':
         specifier: ^10.0.1
@@ -1496,6 +1502,19 @@ packages:
     resolution: {integrity: sha512-/d0QHehmRuJW8gVz395MTkPcPozxzdjBMBE8oEYGz8O3b9KTMzzQ9ZHJQLuFKOHOPQbU6kx/X4iid/EBBzH7iw==}
     engines: {node: '>=18'}
 
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
+
+  tailwind-variants@3.2.2:
+    resolution: {integrity: sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==}
+    engines: {node: '>=16.x', pnpm: '>=7.x'}
+    peerDependencies:
+      tailwind-merge: '>=3.0.0'
+      tailwindcss: '*'
+    peerDependenciesMeta:
+      tailwind-merge:
+        optional: true
+
   tailwindcss@4.3.2:
     resolution: {integrity: sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==}
 
@@ -2981,6 +3000,14 @@ snapshots:
     transitivePeerDependencies:
       - '@typescript-eslint/types'
 
+  tailwind-merge@3.6.0: {}
+
+  tailwind-variants@3.2.2(tailwind-merge@3.6.0)(tailwindcss@4.3.2):
+    dependencies:
+      tailwindcss: 4.3.2
+    optionalDependencies:
+      tailwind-merge: 3.6.0
+
   tailwindcss@4.3.2: {}
 
   tapable@2.3.3: {}
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 2d2abd65..43e56ee5 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -1,3 +1,48 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	export const button = tv({
+		base: 'inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded no-underline transition-[background-color,border-color,color] duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
+		variants: {
+			variant: {
+				default:
+					'border border-border bg-surface text-fg hover:bg-surface-hover focus-visible:outline-ring',
+				primary:
+					'border border-primary-border bg-primary text-primary-fg hover:bg-primary-hover focus-visible:outline-primary',
+				ghost: 'bg-transparent text-fg-muted hover:bg-surface-muted focus-visible:outline-ring',
+				danger:
+					'border border-danger-border bg-danger text-danger-fg hover:bg-danger-hover focus-visible:outline-danger',
+				success:
+					'border border-success-border bg-success text-success-fg hover:bg-success-hover focus-visible:outline-success'
+			},
+			size: {
+				sm: 'min-h-8 gap-1.5 px-2 py-1.5 text-sm',
+				md: 'min-h-9 gap-2 px-4 py-2 text-sm',
+				lg: 'min-h-10 gap-2.5 px-6 py-2 text-base'
+			}
+		},
+		compoundVariants: [
+			// raised variants draw inset depth via a ::before layer.
+			{
+				variant: 'default',
+				class:
+					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-raised-depth)] before:transition-all before:duration-150 hover:before:shadow-[inset_0_-2px_0_0_var(--color-raised-depth-hover)] active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-raised-depth)] disabled:active:translate-y-0"
+			},
+			{
+				variant: ['primary', 'danger', 'success'],
+				class:
+					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-raised-accent-depth)] before:transition-all before:duration-150 active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-raised-accent-depth-active)] disabled:active:translate-y-0"
+			}
+		],
+		defaultVariants: {
+			variant: 'default',
+			size: 'md'
+		}
+	});
+
+	export type ButtonVariants = VariantProps<typeof button>;
+</script>
+
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import type { Snippet } from 'svelte';
@@ -5,8 +50,8 @@
 	import Spinner from './Spinner.svelte';
 
 	interface Props extends Omit<HTMLAnchorAttributes & HTMLButtonAttributes, 'class' | 'children'> {
-		variant?: 'default' | 'primary' | 'ghost' | 'danger' | 'success';
-		size?: 'sm' | 'md' | 'lg';
+		variant?: ButtonVariants['variant'];
+		size?: ButtonVariants['size'];
 		href?: string;
 		type?: 'button' | 'submit' | 'reset';
 		disabled?: boolean;
@@ -22,26 +67,21 @@
 		href,
 		type = 'button',
 		disabled = false,
-		class: className = '',
+		class: className,
 		loading = false,
 		spinnerClass,
 		children,
 		...rest
 	}: Props = $props();
 
-	const raised = $derived(variant !== 'ghost');
-	const accentRaised = $derived(variant !== 'default' && variant !== 'ghost');
+	const classes = $derived(button({ variant, size, class: className }));
 	const spinnerSize = $derived(spinnerClass ?? (size === 'lg' ? 'size-5' : 'size-4'));
 </script>
 
 {#if href}
 	<a
 		href={resolve(href as '/')}
-		class="btn {className}"
-		data-variant={variant}
-		data-size={size}
-		class:raised
-		class:accentRaised
+		class={classes}
 		aria-disabled={disabled || loading ? 'true' : undefined}
 		tabindex={disabled ? -1 : undefined}
 		{...rest}
@@ -53,17 +93,7 @@
 		{/if}
 	</a>
 {:else}
-	<button
-		{type}
-		disabled={disabled || loading}
-		class="btn {className}"
-		data-variant={variant}
-		data-size={size}
-		class:raised
-		class:accentRaised
-		aria-busy={loading}
-		{...rest}
-	>
+	<button {type} disabled={disabled || loading} class={classes} aria-busy={loading} {...rest}>
 		{#if loading}
 			<Spinner class={spinnerSize} />
 		{:else if children}
@@ -71,152 +101,3 @@
 		{/if}
 	</button>
 {/if}
-
-<style>
-	.btn {
-		display: inline-flex;
-		cursor: pointer;
-		align-items: center;
-		justify-content: center;
-		overflow: hidden;
-		border-radius: 0.25rem;
-		text-decoration: none;
-		transition:
-			background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-			border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-			color 150ms cubic-bezier(0.4, 0, 0.2, 1);
-		user-select: none;
-	}
-
-	.btn:hover {
-		text-decoration: none;
-	}
-
-	.btn:focus-visible {
-		outline: 2px solid var(--color-ring);
-		outline-offset: 2px;
-	}
-
-	.btn:disabled {
-		pointer-events: none;
-		opacity: 0.5;
-	}
-
-	.btn[data-variant='default'] {
-		background-color: var(--color-surface);
-		border: 1px solid var(--color-border);
-		color: var(--color-fg);
-	}
-	.btn[data-variant='default']:hover {
-		background-color: var(--color-surface-hover);
-	}
-	.btn[data-variant='default']:focus-visible {
-		outline-color: var(--color-ring);
-	}
-
-	.btn[data-variant='primary'] {
-		background-color: var(--color-primary);
-		border: 1px solid var(--color-primary-border);
-		color: var(--color-primary-fg);
-	}
-	.btn[data-variant='primary']:hover {
-		background-color: var(--color-primary-hover);
-	}
-	.btn[data-variant='primary']:focus-visible {
-		outline-color: var(--color-primary);
-	}
-
-	.btn[data-variant='ghost'] {
-		color: var(--color-fg-muted);
-		background-color: transparent;
-	}
-	.btn[data-variant='ghost']:hover {
-		background-color: var(--color-surface-muted);
-	}
-	.btn[data-variant='ghost']:focus-visible {
-		outline-color: var(--color-ring);
-	}
-
-	.btn[data-variant='danger'] {
-		background-color: var(--color-danger);
-		border: 1px solid var(--color-danger-border);
-		color: var(--color-danger-fg);
-	}
-	.btn[data-variant='danger']:hover {
-		background-color: var(--color-danger-hover);
-	}
-	.btn[data-variant='danger']:focus-visible {
-		outline-color: var(--color-danger);
-	}
-
-	.btn[data-variant='success'] {
-		background-color: var(--color-success);
-		border: 1px solid var(--color-success-border);
-		color: var(--color-success-fg);
-	}
-	.btn[data-variant='success']:hover {
-		background-color: var(--color-success-hover);
-	}
-	.btn[data-variant='success']:focus-visible {
-		outline-color: var(--color-success);
-	}
-
-	.btn[data-size='sm'] {
-		min-height: 2rem;
-		padding: 0.375rem 0.5rem;
-		font-size: 0.875rem;
-		gap: 0.375rem;
-	}
-	.btn[data-size='md'] {
-		min-height: 2.25rem;
-		padding: 0.5rem 1rem;
-		font-size: 0.875rem;
-		gap: 0.5rem;
-	}
-	.btn[data-size='lg'] {
-		min-height: 2.5rem;
-		padding: 0.5rem 1.5rem;
-		font-size: 1rem;
-		gap: 0.625rem;
-	}
-
-	.raised {
-		position: relative;
-		z-index: 0;
-	}
-
-	.raised::before {
-		content: '';
-		position: absolute;
-		inset: 0;
-		z-index: -10;
-		border-radius: inherit;
-		box-shadow: inset 0 -2px 0 0 var(--color-raised-depth);
-		transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-	}
-
-	.raised:hover::before {
-		box-shadow: inset 0 -2px 0 0 var(--color-raised-depth-hover);
-	}
-
-	.raised:active {
-		transform: translateY(0.125rem);
-	}
-
-	.raised:active::before {
-		box-shadow: inset 0 2px 2px 0 var(--color-raised-depth);
-	}
-
-	.accentRaised::before,
-	.accentRaised:hover::before {
-		box-shadow: inset 0 -2px 0 0 var(--color-raised-accent-depth);
-	}
-
-	.accentRaised:active::before {
-		box-shadow: inset 0 2px 2px 0 var(--color-raised-accent-depth-active);
-	}
-
-	.raised:disabled:active {
-		transform: none;
-	}
-</style>
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index 4f1c2c73..fa2eadbc 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -1,5 +1,30 @@
 <script module lang="ts">
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	export const dropdown = tv({
+		slots: {
+			root: 'relative inline-block',
+			plainTrigger:
+				'flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-inherit',
+			menu: 'absolute right-0 z-50 mt-2 w-56 overflow-hidden rounded border border-border bg-surface text-sm shadow-menu'
+		},
+		variants: {
+			open: {
+				true: {
+					menu: 'block'
+				},
+				false: {
+					menu: 'hidden'
+				}
+			}
+		},
+		defaultVariants: {
+			open: false
+		}
+	});
+
+	export type DropdownVariants = VariantProps<typeof dropdown>;
 
 	// opening one dropdown in a group closes its siblings.
 	const groups = new SvelteMap<string, SvelteSet<() => void>>();
@@ -42,6 +67,7 @@
 	let { id, group, variant = 'plain', label, trigger, children }: Props = $props();
 
 	let open = $state(false);
+	const classes = $derived(dropdown({ open }));
 	let root = $state<HTMLElement>();
 
 	const close = () => {
@@ -76,7 +102,7 @@
 	});
 </script>
 
-<div bind:this={root} class="dropdown">
+<div bind:this={root} class={classes.root()}>
 	{#if variant === 'button'}
 		<Button
 			size="sm"
@@ -91,7 +117,7 @@
 	{:else}
 		<button
 			type="button"
-			class="plain"
+			class={classes.plainTrigger()}
 			onclick={toggle}
 			aria-haspopup="menu"
 			aria-expanded={open}
@@ -101,43 +127,7 @@
 		</button>
 	{/if}
 
-	<div {id} class="menu" class:open role="menu">
+	<div {id} class={classes.menu()} role="menu">
 		{@render children()}
 	</div>
 </div>
-
-<style>
-	.dropdown {
-		position: relative;
-		display: inline-block;
-	}
-
-	.plain {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		border: 0;
-		background: transparent;
-		padding: 0;
-		color: inherit;
-		cursor: pointer;
-	}
-
-	.menu {
-		position: absolute;
-		right: 0;
-		z-index: 50;
-		margin-top: 0.5rem;
-		width: 14rem;
-		overflow: hidden;
-		border: 1px solid var(--color-border);
-		border-radius: 0.25rem;
-		background-color: var(--color-surface);
-		box-shadow: var(--shadow-menu);
-		font-size: 0.875rem;
-	}
-
-	.menu:not(.open) {
-		display: none;
-	}
-</style>
diff --git a/web/src/lib/components/ui/DropdownItem.svelte b/web/src/lib/components/ui/DropdownItem.svelte
index de7ee467..1dadef39 100644
--- a/web/src/lib/components/ui/DropdownItem.svelte
+++ b/web/src/lib/components/ui/DropdownItem.svelte
@@ -1,3 +1,22 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	export const dropdownItem = tv({
+		base: 'flex w-full cursor-pointer items-center gap-2 border-0 bg-transparent px-[0.7rem] py-[0.55rem] text-left text-inherit no-underline transition-colors duration-150 hover:no-underline',
+		variants: {
+			danger: {
+				false: 'hover:bg-surface-hover dark:hover:bg-[rgb(55_65_81_/_0.5)]',
+				true: 'text-danger hover:bg-danger-soft'
+			}
+		},
+		defaultVariants: {
+			danger: false
+		}
+	});
+
+	export type DropdownItemVariants = VariantProps<typeof dropdownItem>;
+</script>
+
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import type { Component, Snippet } from 'svelte';
@@ -6,12 +25,13 @@
 	interface Props {
 		href?: string;
 		icon?: Component<SvelteHTMLElements['svg']>;
-		danger?: boolean;
+		danger?: DropdownItemVariants['danger'];
 		onclick?: (event: MouseEvent) => void;
 		children: Snippet;
 	}
 
 	let { href, icon, danger = false, onclick, children }: Props = $props();
+	const classes = $derived(dropdownItem({ danger }));
 
 	const closeDropdown = getContext<(() => void) | undefined>('dropdown-close');
 
@@ -22,7 +42,7 @@
 </script>
 
 {#if href}
-	<a href={resolve(href as '/')} class="item" class:danger onclick={handleClick}>
+	<a href={resolve(href as '/')} class={classes} onclick={handleClick}>
 		{#if icon}
 			{@const Glyph = icon}
 			<Glyph class="size-4" aria-hidden="true" />
@@ -30,7 +50,7 @@
 		{@render children()}
 	</a>
 {:else}
-	<button type="button" class="item" class:danger onclick={handleClick}>
+	<button type="button" class={classes} onclick={handleClick}>
 		{#if icon}
 			{@const Glyph = icon}
 			<Glyph class="size-4" aria-hidden="true" />
@@ -38,40 +58,3 @@
 		{@render children()}
 	</button>
 {/if}
-
-<style>
-	.item {
-		--dropdown-item-hover-bg: #f9fafb;
-		display: flex;
-		width: 100%;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.55rem 0.7rem;
-		border: 0;
-		background: transparent;
-		text-align: left;
-		text-decoration: none;
-		color: inherit;
-		cursor: pointer;
-		transition: background-color 150ms;
-	}
-
-	.item:hover {
-		background-color: var(--dropdown-item-hover-bg);
-		text-decoration: none;
-	}
-
-	@media (prefers-color-scheme: dark) {
-		.item {
-			--dropdown-item-hover-bg: rgb(55 65 81 / 0.5);
-		}
-	}
-
-	.danger {
-		color: var(--color-danger);
-	}
-
-	.danger:hover {
-		background-color: var(--color-danger-soft);
-	}
-</style>