diff --git a/src/components/ds/DsKit.tsx b/src/components/ds/DsKit.tsx
index fb8bec834..358989dbd 100644
--- a/src/components/ds/DsKit.tsx
+++ b/src/components/ds/DsKit.tsx
@@ -78,11 +78,13 @@ export function DsPage({
 }
 
 export function DsSection({
+  id,
   title,
   description,
   children,
   className,
 }: {
+  id?: string
   title: string
   description?: React.ReactNode
   children: React.ReactNode
@@ -90,7 +92,7 @@ export function DsSection({
 }) {
   return (
     <section
-      id={toDsSectionId(title)}
+      id={id ?? toDsSectionId(title)}
       className={twMerge('scroll-mt-24 space-y-5', className)}
     >
       <div className={description ? 'min-h-[70px]' : undefined}>
diff --git a/src/routes/ds.spinner.tsx b/src/routes/ds.spinner.tsx
index 9c0cb00a8..7c478f304 100644
--- a/src/routes/ds.spinner.tsx
+++ b/src/routes/ds.spinner.tsx
@@ -18,6 +18,7 @@ function SpinnerPage() {
   return (
     <DsPage title="Spinners">
       <DsSection
+        id="sizes-and-color"
         title="Spinner"
         description={
           <>