diff --git a/client/App.tsx b/client/App.tsx
index 2eec746..7e48bbf 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -48,6 +48,7 @@ const App = () => {
                 <Route exact={true} path='/sidebar'><DetailsLoader pattern={Pattern.Sidebar} /></Route>
                 <Route exact={true} path='/simple-grid'><DetailsLoader pattern={Pattern.SimpleGrid} /></Route>
                 <Route exact={true} path='/slider'><DetailsLoader pattern={Pattern.Slider} /></Route>
+                <Route exact={true} path='/spin-button'><DetailsLoader pattern={Pattern.SpinButton} /></Route>
                 <Route exact={true} path='/split-navigation'><DetailsLoader pattern={Pattern.SplitNavigation} /></Route>
                 <Route exact={true} path='/split-screen'><DetailsLoader pattern={Pattern.SplitScreen} /></Route>
                 <Route exact={true} path='/stepper-input'><DetailsLoader pattern={Pattern.StepperInput} /></Route>
diff --git a/client/Home.tsx b/client/Home.tsx
index 822e308..161903b 100644
--- a/client/Home.tsx
+++ b/client/Home.tsx
@@ -96,6 +96,7 @@ const Home = () => {
                         <CoverCard pattern={Pattern.Separator} />
                         <CoverCard pattern={Pattern.SimpleGrid} />
                         <CoverCard pattern={Pattern.Slider} />
+                        <CoverCard pattern={Pattern.SpinButton} />
                         <CoverCard pattern={Pattern.SplitNavigation} />
                         <CoverCard pattern={Pattern.StepperInput} />
                         <CoverCard pattern={Pattern.Switch} />
diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 5f8044e..5d58adf 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -27,6 +27,7 @@ enum Pattern {
     Sidebar = 'Sidebar',
     SimpleGrid = 'Simple grid',
     Slider = 'Slider',
+    SpinButton = 'Spin button',
     SplitNavigation = 'Split navigation',
     SplitScreen = 'Split screen',
     StepperInput = 'Stepper input',
diff --git a/client/patterns/spin-button/Cover.tsx b/client/patterns/spin-button/Cover.tsx
new file mode 100644
index 0000000..bad86cf
--- /dev/null
+++ b/client/patterns/spin-button/Cover.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Triangle from '../../placeholders/Triangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        border: '1px solid rgba(0, 0, 0, 0.3)',
+                        borderRadius: '2px',
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        width: '80%',
+                    }}
+                >
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <div style={{ flex: 1, padding: '4px 4px 2px 4px' }}><Triangle size={6} corner="t" /></div>
+                        <div style={{ flex: 1, padding: '2px 4px 4px 4px' }}><Triangle size={6} corner="b" /></div>
+                    </div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/spin-button/Details.tsx b/client/patterns/spin-button/Details.tsx
new file mode 100644
index 0000000..bdd8f6c
--- /dev/null
+++ b/client/patterns/spin-button/Details.tsx
@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Triangle from '../../placeholders/Triangle';
+
+const Details: React.FC<{}> = () => {
+    const [value, setValue] = useState(0);
+    const decrease = () => setValue(value - 1);
+    const increase = () => setValue(value + 1);
+    const change = (e: React.ChangeEvent<HTMLInputElement>) => setValue(parseInt(e.target.value, 10));
+
+    return (
+        <DetailsLayout title="Spin button">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '2px',
+                                    display: 'flex',
+                                }}
+                            >
+                                <input
+                                    type="text"
+                                    style={{
+                                        borderColor: 'transparent',
+                                        marginRight: '4px',
+                                        padding: '4px',
+                                        width: '100px',
+                                    }}
+                                    value={value}
+                                    onChange={change}
+                                />
+                                <div
+                                    style={{
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        justifyContent: 'center',
+                                    }}
+                                >
+                                    <button
+                                        style={{
+                                            borderColor: 'transparent',
+                                            cursor: 'pointer',
+                                            flex: 1,
+                                            padding: '4px 4px 2px 4px',
+                                        }}
+                                        onClick={increase}
+                                    >
+                                        <Triangle size={6} corner="t" />
+                                    </button>
+                                    <button
+                                        style={{
+                                            borderColor: 'transparent',
+                                            cursor: 'pointer',
+                                            flex: 1,
+                                            padding: '2px 4px 4px 4px',
+                                        }}
+                                        onClick={decrease}
+                                    >
+                                        <Triangle size={6} corner="b" />
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 2px;
+    display: flex;
+">
+    <!-- Input -->
+    <input type="text" style="
+        border-color: transparent;
+        margin-right: 4px;
+        padding: 4px;
+        width: 100px;
+    " />
+
+    <!-- Buttons container -->
+    <div style="
+        /* Content is centered vertically */
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    ">
+        <!-- Up button -->
+        <button style="
+            border-color: transparent;
+            /* Make buttons have the same height */
+            flex: 1,
+        ">
+            ...
+        </button>
+
+        <!-- Down button -->
+        <button style="
+            border-color: transparent;
+            /* Make buttons have the same height */
+            flex: 1,
+        ">
+            ...
+        </button>
+    </div>
+</div>
+`}
+                />
+            </div>
+            <RelatedPatterns patterns={[Pattern.StepperInput]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/stepper-input/Details.tsx b/client/patterns/stepper-input/Details.tsx
index 3a87559..05098e1 100644
--- a/client/patterns/stepper-input/Details.tsx
+++ b/client/patterns/stepper-input/Details.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 
@@ -83,6 +85,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+            <RelatedPatterns patterns={[Pattern.SpinButton]} />
         </DetailsLayout>
     );
 };
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 629fd0b..ad8808b 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -30,6 +30,7 @@
     <url><loc>https://csslayout.io/separator</loc></url>
     <url><loc>https://csslayout.io/simple-grid</loc></url>
     <url><loc>https://csslayout.io/slider</loc></url>
+    <url><loc>https://csslayout.io/spin-button</loc></url>
     <url><loc>https://csslayout.io/split-navigation</loc></url>
     <url><loc>https://csslayout.io/stepper-input</loc></url>
     <url><loc>https://csslayout.io/switch</loc></url>