diff --git a/packages/tokens/.storybook/components.tsx b/packages/tokens/.storybook/components.tsx
index 6357c04b..db23ed15 100644
--- a/packages/tokens/.storybook/components.tsx
+++ b/packages/tokens/.storybook/components.tsx
@@ -61,3 +61,19 @@ export const BoxShadowSwatch = function ShadowSwatch(
     </div>
   );
 };
+
+export const BorderSwatch = function BorderSwatch(
+  props: React.ComponentProps<typeof Swatch>
+) {
+  return (
+    <div style={{ padding: 4 }}>
+      <Swatch
+        {...props}
+        style={{
+          margin: 4,
+          ...props.style,
+        }}
+      />
+    </div>
+  );
+};