Add shadcn UI components and replace raw HTML form elements

- Install 8 shadcn components: select, skeleton, checkbox, switch, avatar,
  dropdown-menu, tooltip, textarea
- Replace raw <select> elements with Select component in members page
- Replace raw checkbox with Checkbox component in admin user details
- Add Skeleton loading states to admin pages (users list, orgs list,
  user details) for better UX

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/publisher-dashboard/src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	data-slot="avatar-fallback"
+	class={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn("aspect-square size-full", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/avatar/avatar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { Avatar as AvatarPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  loadingStatus = $bindable("loading"),
+  class: className,
+  ...restProps
+}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	bind:loadingStatus
+	data-slot="avatar"
+	class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/avatar/index.ts

@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Fallback from "./avatar-fallback.svelte";
+import Image from "./avatar-image.svelte";
+
+export {
+  Root,
+  Image,
+  Fallback,
+  //
+  Root as Avatar,
+  Image as AvatarImage,
+  Fallback as AvatarFallback,
+};

apps/publisher-dashboard/src/lib/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+import CheckIcon from "@lucide/svelte/icons/check";
+import MinusIcon from "@lucide/svelte/icons/minus";
+import { Checkbox as CheckboxPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  checked = $bindable(false),
+  indeterminate = $bindable(false),
+  class: className,
+  ...restProps
+}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>

apps/publisher-dashboard/src/lib/components/ui/checkbox/index.ts

@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+  Root,
+  //
+  Root as Checkbox,
+};

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let {
+  ref = $bindable(null),
+  value = $bindable([]),
+  ...restProps
+}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-checkbox-group"
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import CheckIcon from "@lucide/svelte/icons/check";
+import MinusIcon from "@lucide/svelte/icons/minus";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  checked = $bindable(false),
+  indeterminate = $bindable(false),
+  class: className,
+  children: childrenProp,
+  ...restProps
+}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+  children?: Snippet;
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span
+			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+		>
+			{#if indeterminate}
+				<MinusIcon class="size-4" />
+			{:else}
+				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
+
+let {
+  ref = $bindable(null),
+  sideOffset = 4,
+  portalProps,
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.ContentProps & {
+  portalProps?: WithoutChildrenOrChild<
+    ComponentProps<typeof DropdownMenuPortal>
+  >;
+} = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  ...restProps
+}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+  inset?: boolean;
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	data-slot="dropdown-menu-group-heading"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps =
+  $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  variant = "default",
+  ...restProps
+}: DropdownMenuPrimitive.ItemProps & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn(
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+  inset?: boolean;
+} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu-label"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let {
+  ref = $bindable(null),
+  value = $bindable(),
+  ...restProps
+}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+import CircleIcon from "@lucide/svelte/icons/circle";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children: childrenProp,
+  ...restProps
+}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="dropdown-menu-radio-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span
+			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+		>
+			{#if checked}
+				<CircleIcon class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="dropdown-menu-shortcut"
+	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	bind:ref
+	data-slot="dropdown-menu-sub-content"
+	class={cn(
+		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+		className
+	)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  children,
+  ...restProps
+}: DropdownMenuPrimitive.SubTriggerProps & {
+  inset?: boolean;
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ms-auto size-4" />
+</DropdownMenuPrimitive.SubTrigger>

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps =
+  $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let {
+  ref = $bindable(null),
+  ...restProps
+}: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps =
+  $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,54 @@
+import Root from "./dropdown-menu.svelte";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+
+export {
+  CheckboxGroup,
+  CheckboxItem,
+  Content,
+  Portal,
+  Root as DropdownMenu,
+  CheckboxGroup as DropdownMenuCheckboxGroup,
+  CheckboxItem as DropdownMenuCheckboxItem,
+  Content as DropdownMenuContent,
+  Portal as DropdownMenuPortal,
+  Group as DropdownMenuGroup,
+  Item as DropdownMenuItem,
+  Label as DropdownMenuLabel,
+  RadioGroup as DropdownMenuRadioGroup,
+  RadioItem as DropdownMenuRadioItem,
+  Separator as DropdownMenuSeparator,
+  Shortcut as DropdownMenuShortcut,
+  Sub as DropdownMenuSub,
+  SubContent as DropdownMenuSubContent,
+  SubTrigger as DropdownMenuSubTrigger,
+  Trigger as DropdownMenuTrigger,
+  GroupHeading as DropdownMenuGroupHeading,
+  Group,
+  GroupHeading,
+  Item,
+  Label,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Shortcut,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+};

apps/publisher-dashboard/src/lib/components/ui/select/index.ts

@@ -0,0 +1,37 @@
+import Root from "./select.svelte";
+import Content from "./select-content.svelte";
+import Group from "./select-group.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+import Item from "./select-item.svelte";
+import Label from "./select-label.svelte";
+import Portal from "./select-portal.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import Separator from "./select-separator.svelte";
+import Trigger from "./select-trigger.svelte";
+
+export {
+  Root,
+  Group,
+  Label,
+  Item,
+  Content,
+  Trigger,
+  Separator,
+  ScrollDownButton,
+  ScrollUpButton,
+  GroupHeading,
+  Portal,
+  //
+  Root as Select,
+  Group as SelectGroup,
+  Label as SelectLabel,
+  Item as SelectItem,
+  Content as SelectContent,
+  Trigger as SelectTrigger,
+  Separator as SelectSeparator,
+  ScrollDownButton as SelectScrollDownButton,
+  ScrollUpButton as SelectScrollUpButton,
+  GroupHeading as SelectGroupHeading,
+  Portal as SelectPortal,
+};

apps/publisher-dashboard/src/lib/components/ui/select/select-content.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import type { WithoutChildrenOrChild } from "$lib/utils.js";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+import SelectPortal from "./select-portal.svelte";
+import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  sideOffset = 4,
+  portalProps,
+  children,
+  preventScroll = true,
+  ...restProps
+}: WithoutChild<SelectPrimitive.ContentProps> & {
+  portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
+} = $props();
+</script>
+
+<SelectPortal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{preventScroll}
+		data-slot="select-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPortal>

apps/publisher-dashboard/src/lib/components/ui/select/select-group-heading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>

apps/publisher-dashboard/src/lib/components/ui/select/select-group.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps =
+  $props();
+</script>
+
+<SelectPrimitive.Group bind:ref data-slot="select-group" {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/select/select-item.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import CheckIcon from "@lucide/svelte/icons/check";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  value,
+  label,
+  children: childrenProp,
+  ...restProps
+}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute end-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>

apps/publisher-dashboard/src/lib/components/ui/select/select-label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

apps/publisher-dashboard/src/lib/components/ui/select/select-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from "bits-ui";
+
+let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/select/select-scroll-down-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>

apps/publisher-dashboard/src/lib/components/ui/select/select-scroll-up-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>

apps/publisher-dashboard/src/lib/components/ui/select/select-separator.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+import type { Separator as SeparatorPrimitive } from "bits-ui";
+import { Separator } from "$lib/components/ui/separator/index.js";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>

apps/publisher-dashboard/src/lib/components/ui/select/select-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+import { Select as SelectPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  size = "default",
+  ...restProps
+}: WithoutChild<SelectPrimitive.TriggerProps> & {
+  size?: "sm" | "default";
+} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>

apps/publisher-dashboard/src/lib/components/ui/select/select.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from "bits-ui";
+
+let {
+  open = $bindable(false),
+  value = $bindable(),
+  ...restProps
+}: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/skeleton/index.ts

@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+  Root,
+  //
+  Root as Skeleton,
+};

apps/publisher-dashboard/src/lib/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn("bg-accent animate-pulse rounded-md", className)}
+	{...restProps}
+></div>

apps/publisher-dashboard/src/lib/components/ui/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+  Root,
+  //
+  Root as Switch,
+};

apps/publisher-dashboard/src/lib/components/ui/switch/switch.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import { Switch as SwitchPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  checked = $bindable(false),
+  ...restProps
+}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		"data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class={cn(
+			"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>

apps/publisher-dashboard/src/lib/components/ui/textarea/index.ts

@@ -0,0 +1,7 @@
+import Root from "./textarea.svelte";
+
+export {
+  Root,
+  //
+  Root as Textarea,
+};

apps/publisher-dashboard/src/lib/components/ui/textarea/textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import type { HTMLTextareaAttributes } from "svelte/elements";
+import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  value = $bindable(),
+  class: className,
+  "data-slot": dataSlot = "textarea",
+  ...restProps
+}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>

apps/publisher-dashboard/src/lib/components/ui/tooltip/index.ts

@@ -0,0 +1,19 @@
+import Root from "./tooltip.svelte";
+import Content from "./tooltip-content.svelte";
+import Portal from "./tooltip-portal.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+
+export {
+  Root,
+  Trigger,
+  Content,
+  Provider,
+  Portal,
+  //
+  Root as Tooltip,
+  Content as TooltipContent,
+  Trigger as TooltipTrigger,
+  Provider as TooltipProvider,
+  Portal as TooltipPortal,
+};

apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import type { WithoutChildrenOrChild } from "$lib/utils.js";
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+import TooltipPortal from "./tooltip-portal.svelte";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  sideOffset = 0,
+  side = "top",
+  children,
+  arrowClasses,
+  portalProps,
+  ...restProps
+}: TooltipPrimitive.ContentProps & {
+  arrowClasses?: string;
+  portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
+						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>

apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps =
+  $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

apps/publisher-dashboard/src/lib/components/ui/tooltip/tooltip.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps =
+  $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />

apps/publisher-dashboard/src/routes/admin/orgs/+page.svelte

@@ -1,12 +1,5 @@
 <script lang="ts">
-import {
+import { AlertCircle, Building, Eye, Plus, Trash2 } from "@lucide/svelte";
-  AlertCircle,
-  Building,
-  Eye,
-  Loader2,
-  Plus,
-  Trash2,
-} from "@lucide/svelte";
 import { createQuery, useQueryClient } from "@tanstack/svelte-query";
 import { toast } from "svelte-sonner";
 import { api } from "$lib/api/client.js";
@@ -19,6 +12,7 @@ import {
   CardHeader,
   CardTitle,
 } from "$lib/components/ui/card/index.js";
+import { Skeleton } from "$lib/components/ui/skeleton/index.js";
 import {
   Table,
   TableBody,
@@ -89,11 +83,46 @@ async function executeConfirmAction() {
 <DashboardLayout title="Organizations">
   <div class="space-y-6">
     {#if orgsQuery.isPending}
-      <!-- Loading state -->
+      <!-- Loading skeleton -->
-      <div class="flex flex-col items-center justify-center py-16">
+      <div class="flex items-center justify-between">
-        <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
+        <Skeleton class="h-7 w-40" />
-        <p class="mt-4 text-sm text-muted-foreground">Loading organizations...</p>
+        <Skeleton class="h-9 w-40" />
       </div>
+      <Card>
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2 text-base">
+            <Building class="h-4 w-4" />
+            <Skeleton class="h-5 w-32" />
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Slug</TableHead>
+                <TableHead>Display Name</TableHead>
+                <TableHead>Created At</TableHead>
+                <TableHead class="w-[120px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {#each Array(5) as _}
+                <TableRow>
+                  <TableCell><Skeleton class="h-4 w-24" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-32" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-24" /></TableCell>
+                  <TableCell>
+                    <div class="flex items-center gap-1">
+                      <Skeleton class="h-8 w-8" />
+                      <Skeleton class="h-8 w-8" />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              {/each}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
     {:else if orgsQuery.error}
       <!-- Error state -->
       <div class="flex flex-col items-center justify-center py-16">

apps/publisher-dashboard/src/routes/admin/users/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { AlertCircle, Check, Eye, Loader2, Users, X } from "@lucide/svelte";
+import { AlertCircle, Check, Eye, Users, X } from "@lucide/svelte";
 import { createQuery } from "@tanstack/svelte-query";
 import { api } from "$lib/api/client.js";
 import { SuperuserBadge } from "$lib/components/admin/index.js";
@@ -11,6 +11,7 @@ import {
   CardHeader,
   CardTitle,
 } from "$lib/components/ui/card/index.js";
+import { Skeleton } from "$lib/components/ui/skeleton/index.js";
 import {
   Table,
   TableBody,
@@ -38,9 +39,39 @@ const usersQuery = createQuery(() => ({
 
 <DashboardLayout title="Users">
   {#if usersQuery.isPending}
-    <div class="flex flex-col items-center justify-center py-16">
+    <div class="space-y-6">
-      <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
+      <Card>
-      <p class="mt-4 text-sm text-muted-foreground">Loading users...</p>
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2 text-base">
+            <Users class="h-4 w-4" />
+            <Skeleton class="h-5 w-20" />
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Email</TableHead>
+                <TableHead>Display Name</TableHead>
+                <TableHead>Email Verified</TableHead>
+                <TableHead>Superuser</TableHead>
+                <TableHead class="w-[100px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {#each Array(5) as _}
+                <TableRow>
+                  <TableCell><Skeleton class="h-4 w-40" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-24" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-4" /></TableCell>
+                  <TableCell><Skeleton class="h-4 w-16" /></TableCell>
+                  <TableCell><Skeleton class="h-8 w-16" /></TableCell>
+                </TableRow>
+              {/each}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
     </div>
   {:else if usersQuery.error}
     <div class="flex flex-col items-center justify-center py-16">

apps/publisher-dashboard/src/routes/admin/users/[email]/+page.svelte

@@ -25,6 +25,9 @@ import {
   CardHeader,
   CardTitle,
 } from "$lib/components/ui/card/index.js";
+import { Checkbox } from "$lib/components/ui/checkbox/index.js";
+import { Label } from "$lib/components/ui/label/index.js";
+import { Skeleton } from "$lib/components/ui/skeleton/index.js";
 
 /**
  * Admin user details page
@@ -154,9 +157,51 @@ async function handleConfirmEmail() {
   </div>
 
   {#if userDetailsQuery.isPending}
-    <div class="flex flex-col items-center justify-center py-16">
+    <div class="space-y-6">
-      <Loader2 class="h-8 w-8 animate-spin text-muted-foreground" />
+      <!-- Header Section Skeleton -->
-      <p class="mt-4 text-sm text-muted-foreground">Loading user...</p>
+      <Card>
+        <CardContent class="pt-6">
+          <div class="flex items-center gap-4">
+            <Skeleton class="h-16 w-16 rounded-full" />
+            <div class="flex-1 space-y-2">
+              <Skeleton class="h-6 w-48" />
+              <Skeleton class="h-4 w-32" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Profile Info Skeleton -->
+      <Card>
+        <CardHeader>
+          <Skeleton class="h-5 w-40" />
+          <Skeleton class="h-4 w-48" />
+        </CardHeader>
+        <CardContent>
+          <div class="grid gap-4 sm:grid-cols-2">
+            {#each Array(5) as _}
+              <div class="space-y-1">
+                <Skeleton class="h-4 w-20" />
+                <Skeleton class="h-5 w-32" />
+              </div>
+            {/each}
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Permissions Skeleton -->
+      <Card>
+        <CardHeader>
+          <Skeleton class="h-5 w-24" />
+          <Skeleton class="h-4 w-36" />
+        </CardHeader>
+        <CardContent>
+          <div class="flex items-center gap-3">
+            <Skeleton class="h-4 w-4" />
+            <Skeleton class="h-4 w-40" />
+          </div>
+        </CardContent>
+      </Card>
     </div>
   {:else if userDetailsQuery.error}
     <div class="flex flex-col items-center justify-center py-16">
@@ -256,16 +301,17 @@ async function handleConfirmEmail() {
               </AlertDescription>
             </Alert>
           {:else}
-            <label class="flex cursor-pointer items-center gap-3">
+            <div class="flex items-center gap-3">
-              <input
+              <Checkbox
-                type="checkbox"
+                id="superuser-checkbox"
                 checked={isSuperuser}
-                onchange={(e) => (isSuperuser = e.currentTarget.checked)}
+                onCheckedChange={(checked) => { isSuperuser = checked === true; }}
                 disabled={isViewingSelf || isSaving}
-                class="h-4 w-4 rounded border-input bg-background text-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
               />
-              <span class="text-sm font-medium leading-none">Grant superuser privileges</span>
+              <Label for="superuser-checkbox" class="cursor-pointer">
-            </label>
+                Grant superuser privileges
+              </Label>
+            </div>
           {/if}
         </CardContent>
         {#if !isViewingSelf}

apps/publisher-dashboard/src/routes/dashboard/[slug]/members/+page.svelte

@@ -22,6 +22,12 @@ import {
 } from "$lib/components/ui/card";
 import { Input } from "$lib/components/ui/input";
 import { Label } from "$lib/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "$lib/components/ui/select";
 import {
   Table,
   TableBody,
@@ -284,16 +290,21 @@ const availableInviteRoles = $derived.by(() => {
               </div>
               <div class="w-full space-y-2 sm:w-32">
                 <Label for="invite-role">Role</Label>
-                <select
+                <Select
-                  id="invite-role"
+                  type="single"
-                  bind:value={inviteRole}
+                  value={inviteRole}
+                  onValueChange={(v) => { if (v) inviteRole = v as typeof inviteRole; }}
                   disabled={isInviting}
-                  class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                 >
+                  <SelectTrigger id="invite-role" class="w-full">
+                    {inviteRole.charAt(0).toUpperCase() + inviteRole.slice(1)}
+                  </SelectTrigger>
+                  <SelectContent>
                     {#each availableInviteRoles as role}
-                    <option value={role}>{role.charAt(0).toUpperCase() + role.slice(1)}</option>
+                      <SelectItem value={role} label={role.charAt(0).toUpperCase() + role.slice(1)} />
                     {/each}
-                </select>
+                  </SelectContent>
+                </Select>
               </div>
               <Button type="submit" disabled={isInviting || !inviteEmail.trim()}>
                 {#if isInviting}
@@ -398,15 +409,20 @@ const availableInviteRoles = $derived.by(() => {
                     </TableCell>
                     <TableCell>
                       {#if isOwner && !isCurrentUser}
-                        <select
+                        <Select
+                          type="single"
                           value={member.role}
-                          onchange={(e) => handleUpdateRole(member.userId, e.currentTarget.value as "owner" | "admin" | "member")}
+                          onValueChange={(v) => { if (v) handleUpdateRole(member.userId, v as "owner" | "admin" | "member"); }}
-                          class="h-7 rounded-md border border-input bg-transparent px-2 text-xs shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                         >
-                          <option value="member">Member</option>
+                          <SelectTrigger size="sm" class="h-7 w-24 text-xs">
-                          <option value="admin">Admin</option>
+                            {member.role.charAt(0).toUpperCase() + member.role.slice(1)}
-                          <option value="owner">Owner</option>
+                          </SelectTrigger>
-                        </select>
+                          <SelectContent>
+                            <SelectItem value="member" label="Member" />
+                            <SelectItem value="admin" label="Admin" />
+                            <SelectItem value="owner" label="Owner" />
+                          </SelectContent>
+                        </Select>
                       {:else}
                         <RoleBadge role={member.role} />
                       {/if}