diff --git a/AGENTS.md b/AGENTS.md
index d3a4d3eb..27b813ce 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -8,7 +8,7 @@ Background context on how the stack fits together.
 
 ### frontend/backend routing
 
-- The Go server reverse-proxies `/v2/*` to the Next.js app in `./frontend-v2` (see `proxyHandler` in `server/src/main.go`). Next.js itself is unaware of this prefix — its routes start at `/`, so internal links and route definitions should never include `/v2`. For example, link to `/activists/123`, not `/v2/activists/123`.
+- The Go server reverse-proxies `/v2/*` to the Next.js app in `./frontend-v2` (see `proxyHandler` in `server/src/main.go`). Next.js has `basePath: '/v2'` configured (`next.config.ts`), so it automatically prepends `/v2` to all routes. Next.js navigation (`<Link href>`, `router.push()`, `redirect()`, and route definitions) must therefore omit the `/v2` prefix — Next.js adds it. For example, `<Link href="/activists/123">`, not `<Link href="/v2/activists/123">`.
 - The Go API lives at the same origin. The `ApiClient` in `frontend-v2/src/lib/api.ts` calls paths like `api/activists`, `event/get`, etc. directly without a `/v2` prefix.
 
 ## frontend
diff --git a/frontend-v2/src/app/(authed)/activists/[id]/activist-detail.tsx b/frontend-v2/src/app/(authed)/activists/[id]/activist-detail.tsx
index e15bed9c..efa1df03 100644
--- a/frontend-v2/src/app/(authed)/activists/[id]/activist-detail.tsx
+++ b/frontend-v2/src/app/(authed)/activists/[id]/activist-detail.tsx
@@ -2,8 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import Link from 'next/link'
-import { ArrowLeft, EyeOff, GitMerge, Pencil } from 'lucide-react'
+import { EyeOff, GitMerge, Pencil } from 'lucide-react'
 import {
   API_PATH,
   apiClient,
@@ -133,22 +132,6 @@ export function ActivistDetail({ activistId }: { activistId: number }) {
 
   return (
     <>
-      <div className="flex items-center gap-3">
-        <Link
-          href="/activists"
-          className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >
-          {/**
-           * Back button does not really go back - just goes to /activists.
-           * Detecting if router.back() actually goes back to /activists is
-           * complicated but may be implemented in the future to preserve the
-           * page state / scroll position.
-           */}
-          <ArrowLeft className="h-4 w-4" />
-          View all Activists
-        </Link>
-      </div>
-
       <div className="flex flex-wrap items-center justify-between gap-3">
         <h1
           className={`text-3xl font-bold ${
diff --git a/frontend-v2/src/app/(authed)/activists/[id]/page.tsx b/frontend-v2/src/app/(authed)/activists/[id]/page.tsx
index eca612d3..04249eda 100644
--- a/frontend-v2/src/app/(authed)/activists/[id]/page.tsx
+++ b/frontend-v2/src/app/(authed)/activists/[id]/page.tsx
@@ -4,6 +4,8 @@ import {
   QueryClient,
 } from '@tanstack/react-query'
 import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import { ArrowLeft } from 'lucide-react'
 import { ContentWrapper } from '@/app/content-wrapper'
 import { API_PATH, ApiClient } from '@/lib/api'
 import { getCookies } from '@/lib/auth'
@@ -35,6 +37,15 @@ export default async function ActivistPage({
 
   return (
     <ContentWrapper size="lg" className="gap-6">
+      <div className="flex items-center gap-3">
+        <Link
+          href="/activists"
+          className="flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          View all Activists
+        </Link>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ActivistDetail activistId={activistId} />
       </HydrationBoundary>
diff --git a/frontend-v2/src/app/(authed)/activists/activist-sheet.tsx b/frontend-v2/src/app/(authed)/activists/activist-sheet.tsx
new file mode 100644
index 00000000..4b143f24
--- /dev/null
+++ b/frontend-v2/src/app/(authed)/activists/activist-sheet.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import Link from 'next/link'
+import { ExternalLink, X } from 'lucide-react'
+import { useState } from 'react'
+import { ActivistDetail } from './[id]/activist-detail'
+
+interface ActivistSheetProps {
+  activistId: number | null
+  onClose: () => void
+}
+
+export function ActivistSheet({ activistId, onClose }: ActivistSheetProps) {
+  // Holds the last non-null activistId. Never cleared back to null so content
+  // stays mounted and visible while Radix plays the exit animation.
+  const [displayActivistId, setDisplayActivistId] = useState<number | null>(
+    null,
+  )
+  const [prevActivistId, setPrevActivistId] = useState<number | null>(null)
+
+  // React derived-state pattern: update synchronously during render so content
+  // is present on the first open paint without waiting for an effect.
+  if (activistId !== null && activistId !== prevActivistId) {
+    setPrevActivistId(activistId)
+    setDisplayActivistId(activistId)
+  }
+
+  return (
+    <DialogPrimitive.Root
+      modal={false}
+      open={activistId !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose()
+      }}
+    >
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Content className="fixed inset-y-0 right-0 z-50 flex h-full w-full flex-col overflow-hidden border-l bg-background shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-2xl">
+          <DialogPrimitive.Title className="sr-only">
+            Activist Details
+          </DialogPrimitive.Title>
+          <DialogPrimitive.Description className="sr-only">
+            View and edit activist information
+          </DialogPrimitive.Description>
+
+          <div className="flex items-center justify-between border-b px-6 py-3">
+            {displayActivistId !== null && (
+              <Link
+                href={`/activists/${displayActivistId}`}
+                className="flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+              >
+                <ExternalLink className="h-4 w-4" />
+                Full page
+              </Link>
+            )}
+            <DialogPrimitive.Close className="ml-auto rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          </div>
+
+          <div className="flex flex-1 flex-col gap-6 overflow-y-auto px-6 pb-6 pt-4">
+            {displayActivistId !== null && (
+              <ActivistDetail activistId={displayActivistId} />
+            )}
+          </div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}
diff --git a/frontend-v2/src/app/(authed)/activists/activists-page.tsx b/frontend-v2/src/app/(authed)/activists/activists-page.tsx
index 0f80fde1..e33820ef 100644
--- a/frontend-v2/src/app/(authed)/activists/activists-page.tsx
+++ b/frontend-v2/src/app/(authed)/activists/activists-page.tsx
@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from 'react'
 import { useInfiniteQuery } from '@tanstack/react-query'
+import { useQueryState, parseAsInteger } from 'nuqs'
 import {
   apiClient,
   API_PATH,
@@ -16,6 +17,7 @@ import { ActivistTable } from './activists-table'
 import { ActivistFilters } from './filters/activist-filters'
 import { ColumnSelector } from './column-selector'
 import { SortSelector } from './sort-selector'
+import { ActivistSheet } from './activist-sheet'
 import { buildQueryOptions } from './filter-api-query'
 import type { ActivistsQueryState, SortColumn } from './query-state'
 import { DEFAULT_SORT } from './query-state'
@@ -33,6 +35,11 @@ export default function ActivistsPage({
   const { user } = useAuthedPageContext()
   const isAdmin = user.Roles.includes('admin')
 
+  const [selectedActivistId, setSelectedActivistId] = useQueryState(
+    'activist',
+    parseAsInteger.withOptions({ history: 'push', scroll: false }),
+  )
+
   const {
     filters,
     selectedColumns,
@@ -157,92 +164,100 @@ export default function ActivistsPage({
   const tableSort = isPlaceholderData ? settledTableState.sort : sort
 
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-1">
-        <h1 className="text-2xl font-semibold">Activists</h1>
-      </div>
+    <>
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-2xl font-semibold">Activists</h1>
+        </div>
 
-      <ActivistFilters
-        filters={filters}
-        onFiltersChange={setFilters}
-        isAdmin={isAdmin}
-        isDirty={isDirty}
-        onReset={resetAll}
-      >
-        <ColumnSelector
-          visibleColumns={selectedColumns}
-          onColumnsChange={setSelectedColumns}
-          isChapterColumnShown={filters.searchAcrossChapters}
-        />
-        <SortSelector
-          label="Sort by"
-          value={isExplicitSort ? sort[0] : undefined}
-          onChange={(primary) =>
-            setSort(
-              sort.length > 1 && sort[1].column !== primary.column
-                ? [primary, sort[1]]
-                : [primary],
-            )
-          }
-          onClear={() => setSort([])}
-          canClear={isExplicitSort}
-          availableColumns={selectedColumns}
-        />
-        {isExplicitSort && (
+        <ActivistFilters
+          filters={filters}
+          onFiltersChange={setFilters}
+          isAdmin={isAdmin}
+          isDirty={isDirty}
+          onReset={resetAll}
+        >
+          <ColumnSelector
+            visibleColumns={selectedColumns}
+            onColumnsChange={setSelectedColumns}
+            isChapterColumnShown={filters.searchAcrossChapters}
+          />
           <SortSelector
-            label="Then by"
-            inactiveLabel="Then sort by"
-            value={sort[1]}
-            onChange={(secondary) => setSort([sort[0], secondary])}
-            onClear={() => setSort([sort[0]])}
-            availableColumns={selectedColumns.filter(
-              (col) => col !== sort[0].column,
-            )}
+            label="Sort by"
+            value={isExplicitSort ? sort[0] : undefined}
+            onChange={(primary) =>
+              setSort(
+                sort.length > 1 && sort[1].column !== primary.column
+                  ? [primary, sort[1]]
+                  : [primary],
+              )
+            }
+            onClear={() => setSort([])}
+            canClear={isExplicitSort}
+            availableColumns={selectedColumns}
           />
-        )}
-      </ActivistFilters>
+          {isExplicitSort && (
+            <SortSelector
+              label="Then by"
+              inactiveLabel="Then sort by"
+              value={sort[1]}
+              onChange={(secondary) => setSort([sort[0], secondary])}
+              onClear={() => setSort([sort[0]])}
+              availableColumns={selectedColumns.filter(
+                (col) => col !== sort[0].column,
+              )}
+            />
+          )}
+        </ActivistFilters>
 
-      {isLoading && (
-        <div className="flex items-center justify-center py-12 text-muted-foreground">
-          Loading activists...
-        </div>
-      )}
+        {isLoading && (
+          <div className="flex items-center justify-center py-12 text-muted-foreground">
+            Loading activists...
+          </div>
+        )}
 
-      {isError && (
-        <div className="flex items-center justify-center py-12 text-destructive">
-          {error instanceof Error
-            ? error.message.replace(/^invalid query options:\s*/i, '')
-            : 'Failed to load activists. Please try again.'}
-        </div>
-      )}
-
-      {!isLoading && !isError && (
-        <>
-          {activists.length > 0 && (
-            <div className="text-sm text-muted-foreground">
-              {activists.length} activist
-              {activists.length !== 1 ? 's' : ''} shown
-            </div>
-          )}
+        {isError && (
+          <div className="flex items-center justify-center py-12 text-destructive">
+            {error instanceof Error
+              ? error.message.replace(/^invalid query options:\s*/i, '')
+              : 'Failed to load activists. Please try again.'}
+          </div>
+        )}
 
-          <ActivistTable
-            activists={activists}
-            visibleColumns={tableColumns}
-            sort={tableSort}
-            onSortChange={setSort}
-            isStale={isPlaceholderData}
-          />
+        {!isLoading && !isError && (
+          <>
+            {activists.length > 0 && (
+              <div className="text-sm text-muted-foreground">
+                {activists.length} activist
+                {activists.length !== 1 ? 's' : ''} shown
+              </div>
+            )}
 
-          {hasNextPage && (
-            <InfiniteScrollTrigger
-              onLoadMore={fetchNextPage}
-              isLoading={isFetchingNextPage}
-              canLoadMore={hasNextPage}
-              loadingLabel="Loading more activists…"
+            <ActivistTable
+              activists={activists}
+              visibleColumns={tableColumns}
+              sort={tableSort}
+              onSortChange={setSort}
+              onActivistClick={setSelectedActivistId}
+              isStale={isPlaceholderData}
             />
-          )}
-        </>
-      )}
-    </div>
+
+            {hasNextPage && (
+              <InfiniteScrollTrigger
+                onLoadMore={fetchNextPage}
+                isLoading={isFetchingNextPage}
+                canLoadMore={hasNextPage}
+                loadingLabel="Loading more activists…"
+              />
+            )}
+          </>
+        )}
+      </div>
+
+      <ActivistSheet
+        activistId={selectedActivistId}
+        onClose={() => setSelectedActivistId(null)}
+      />
+    </>
   )
 }
diff --git a/frontend-v2/src/app/(authed)/activists/activists-table.tsx b/frontend-v2/src/app/(authed)/activists/activists-table.tsx
index 58fa1017..800d9d33 100644
--- a/frontend-v2/src/app/(authed)/activists/activists-table.tsx
+++ b/frontend-v2/src/app/(authed)/activists/activists-table.tsx
@@ -28,6 +28,7 @@ interface ActivistTableProps {
   visibleColumns: ActivistColumnName[]
   sort: SortColumn[]
   onSortChange: (sort: SortColumn[]) => void
+  onActivistClick?: (id: number) => void
   isStale?: boolean
 }
 
@@ -36,6 +37,7 @@ export function ActivistTable({
   visibleColumns,
   sort,
   onSortChange,
+  onActivistClick,
   isStale = false,
 }: ActivistTableProps) {
   const columns = useMemo<ColumnDef<ActivistJSON>[]>(() => {
@@ -86,17 +88,25 @@ export function ActivistTable({
         cell: ({ row }) => {
           if (colName === 'name') {
             const displayName = getActivistDisplayName(row.original)
+            const nameClass = `truncate text-sm text-primary hover:underline ${
+              displayName.isPlaceholder ? 'italic text-muted-foreground' : ''
+            }`
             return (
-              <IntentPrefetchLink
-                href={`/activists/${row.original.id}`}
-                className={`truncate text-sm text-primary hover:underline ${
-                  displayName.isPlaceholder
-                    ? 'italic text-muted-foreground'
-                    : ''
-                }`}
+              <a
+                href={`/v2/activists/${row.original.id}`}
+                className={nameClass}
+                onClick={
+                  onActivistClick
+                    ? (e) => {
+                        if (e.ctrlKey || e.metaKey || e.shiftKey) return
+                        e.preventDefault()
+                        onActivistClick(row.original.id)
+                      }
+                    : undefined
+                }
               >
                 {displayName.text}
-              </IntentPrefetchLink>
+              </a>
             )
           }
 
@@ -117,7 +127,7 @@ export function ActivistTable({
         },
       }
     })
-  }, [visibleColumns, sort, onSortChange, isStale])
+  }, [visibleColumns, sort, onSortChange, onActivistClick, isStale])
 
   const table = useReactTable({
     data: activists,
@@ -197,53 +207,70 @@ export function ActivistTable({
       <div className="flex flex-col gap-4 md:hidden">
         {activists.map((activist) => {
           const displayName = getActivistDisplayName(activist)
+          const cardClass = `block rounded-lg border bg-card p-4 transition-opacity hover:border-primary/50 text-left w-full ${
+            isStale ? 'opacity-60' : ''
+          }`
+          const cardContent = (
+            <div className="flex flex-col gap-2">
+              {visibleColumns.map((colName) => {
+                const definition = COLUMN_DEFINITION_BY_NAME[colName]
+                const label = definition?.label || colName
+                const isBool = COLUMN_TYPE_BY_NAME[colName] === 'boolean'
+                const rawValue = activist[colName as keyof ActivistJSON]
+                const formattedValue = isBool
+                  ? null
+                  : colName === 'name'
+                    ? displayName.text
+                    : formatValue(rawValue, colName)
 
-          return (
+                return (
+                  <div key={colName} className="flex justify-between gap-2">
+                    <span className="text-sm font-medium text-muted-foreground">
+                      {label}:
+                    </span>
+                    {isBool ? (
+                      rawValue ? (
+                        <Check className="h-4 w-4 text-foreground" />
+                      ) : (
+                        <Minus className="h-4 w-4 text-muted-foreground" />
+                      )
+                    ) : (
+                      <span
+                        className={`text-sm ${
+                          colName === 'name' && displayName.isPlaceholder
+                            ? 'italic text-muted-foreground'
+                            : ''
+                        }`}
+                      >
+                        {formattedValue}
+                      </span>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )
+
+          return onActivistClick ? (
+            <a
+              key={activist.id}
+              href={`/v2/activists/${activist.id}`}
+              className={cardClass}
+              onClick={(e) => {
+                if (e.ctrlKey || e.metaKey || e.shiftKey) return
+                e.preventDefault()
+                onActivistClick(activist.id)
+              }}
+            >
+              {cardContent}
+            </a>
+          ) : (
             <IntentPrefetchLink
               key={activist.id}
               href={`/activists/${activist.id}`}
-              className={`block rounded-lg border bg-card p-4 transition-opacity hover:border-primary/50 ${
-                isStale ? 'opacity-60' : ''
-              }`}
+              className={cardClass}
             >
-              <div className="flex flex-col gap-2">
-                {visibleColumns.map((colName) => {
-                  const definition = COLUMN_DEFINITION_BY_NAME[colName]
-                  const label = definition?.label || colName
-                  const isBool = COLUMN_TYPE_BY_NAME[colName] === 'boolean'
-                  const rawValue = activist[colName as keyof ActivistJSON]
-                  const formattedValue = isBool
-                    ? null
-                    : colName === 'name'
-                      ? displayName.text
-                      : formatValue(rawValue, colName)
-
-                  return (
-                    <div key={colName} className="flex justify-between gap-2">
-                      <span className="text-sm font-medium text-muted-foreground">
-                        {label}:
-                      </span>
-                      {isBool ? (
-                        rawValue ? (
-                          <Check className="h-4 w-4 text-foreground" />
-                        ) : (
-                          <Minus className="h-4 w-4 text-muted-foreground" />
-                        )
-                      ) : (
-                        <span
-                          className={`text-sm ${
-                            colName === 'name' && displayName.isPlaceholder
-                              ? 'italic text-muted-foreground'
-                              : ''
-                          }`}
-                        >
-                          {formattedValue}
-                        </span>
-                      )}
-                    </div>
-                  )
-                })}
-              </div>
+              {cardContent}
             </IntentPrefetchLink>
           )
         })}
diff --git a/frontend-v2/src/components/ui/sheet.tsx b/frontend-v2/src/components/ui/sheet.tsx
new file mode 100644
index 00000000..b50794e3
--- /dev/null
+++ b/frontend-v2/src/components/ui/sheet.tsx
@@ -0,0 +1,141 @@
+'use client'
+
+import * as React from 'react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+)
+
+interface SheetContentProps
+  extends
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}