diff --git a/resources/css/showcase.css b/resources/css/showcase.css
index 36520739..3fcc4196 100644
--- a/resources/css/showcase.css
+++ b/resources/css/showcase.css
@@ -383,4 +383,11 @@
     [data-md-showcase-illustration='on-accent'] {
         fill: var(--md-sys-color-on-tertiary);
     }
+
+    /* Progress: one circular indicator drawn larger than its 48px default, to show the ring
+       scales with its box. */
+    [data-md-showcase-progress-lg] {
+        width: 96px;
+        height: 96px;
+    }
 }
diff --git a/resources/views/showcase/sections/progress.blade.php b/resources/views/showcase/sections/progress.blade.php
index f3cc3eb3..343a90ad 100644
--- a/resources/views/showcase/sections/progress.blade.php
+++ b/resources/views/showcase/sections/progress.blade.php
@@ -1,57 +1,60 @@
 @php
     $examples = [
-        'Linear: determinate and indeterminate' => [<<<'BLADE'
+        'Linear: determinate and indeterminate' => <<<'BLADE'
             <x-progress value="40" label="Linear" />
             <x-progress label="Linear, indeterminate" />
-            BLADE, true],
-        'Linear wavy' => [<<<'BLADE'
+            BLADE,
+        'Linear wavy' => <<<'BLADE'
             <x-progress value="60" wavy label="Wavy" />
             <x-progress wavy label="Wavy, indeterminate" />
-            BLADE, true],
-        'Thick' => [<<<'BLADE'
+            BLADE,
+        'Thick' => <<<'BLADE'
             <x-progress value="70" thick label="Thick" />
             <x-progress value="55" wavy thick label="Thick wavy" />
             <x-progress wavy thick label="Thick wavy, indeterminate" />
-            BLADE, true],
-        'Circular' => [<<<'BLADE'
+            BLADE,
+        'Circular' => <<<'BLADE'
             <x-progress value="65" circular label="Circular" />
             <x-progress circular label="Circular, indeterminate" />
             <x-progress value="65" circular wavy label="Circular wavy" />
             <x-progress circular wavy label="Circular wavy, indeterminate" />
             <x-progress value="65" circular thick label="Circular thick" />
             <x-progress value="65" circular wavy thick label="Circular wavy thick" />
-            <x-progress circular wavy class="size-24" label="Circular wavy, 96px" />
-            BLADE, false],
-        'Colours' => [<<<'BLADE'
+            <x-progress circular wavy data-md-showcase-progress-lg label="Circular wavy, 96px" />
+            BLADE,
+        'Colours' => <<<'BLADE'
             <x-progress value="35" color="secondary" label="Secondary" />
             <x-progress value="50" wavy color="tertiary" label="Tertiary" />
             <x-progress value="65" color="error" label="Error" />
             <x-progress value="80" wavy color="success" label="Success" />
             <x-progress value="45" color="warning" label="Warning" />
             <x-progress value="55" wavy color="info" label="Info" />
-            BLADE, true],
-        'Following a value in the browser (bind)' => [<<<'BLADE'
-            <div x-data="{ progress: 30 }" class="w-full space-y-6">
+            BLADE,
+        'Following a value in the browser (bind)' => <<<'BLADE'
+            <x-livewire-material::stack gap="space300" x-data="{ progress: 30 }">
                 <x-button label="Set a random value" variant="tonal" x-on:click="progress = Math.round(Math.random() * 100)" />
                 <x-progress bind="progress" label="Bound" />
                 <x-progress bind="progress" wavy label="Bound wavy" />
-                <div class="flex gap-6">
+                <x-livewire-material::row gap="space300">
                     <x-progress bind="progress" circular label="Bound circular" />
                     <x-progress bind="progress" circular wavy label="Bound circular wavy" />
-                </div>
-            </div>
-            BLADE, false],
+                </x-livewire-material::row>
+            </x-livewire-material::stack>
+            BLADE,
     ];
+
+    // Every example stacks except Circular, which lays several indicators side by side in a row.
+    $rows = ['Circular'];
 @endphp
 
-<section id="progress" class="scroll-mt-24 space-y-6">
-    <h2 class="type-headline-md">Progress</h2>
+<x-livewire-material::stack as="section" id="progress" gap="space300">
+    <h2 class="md-type-headline-md">Progress</h2>
 
-    <p class="max-w-3xl type-body-md text-on-surface-variant">
+    <p class="md-type-body-md md-ink-variant">
         <code>&lt;x-progress&gt;</code>: M3 Expressive's linear and circular progress indicators, flat or wavy, determinate or indeterminate.
     </p>
 
-    @foreach ($examples as $title => [$code, $stack])
-        <x-showcase::example :$title :$code :$stack />
+    @foreach ($examples as $title => $code)
+        <x-showcase::example :$title :$code :stack="! in_array($title, $rows, true)" />
     @endforeach
-</section>
+</x-livewire-material::stack>