From b820186deef26ac6a101ab28876c346373cfc03f Mon Sep 17 00:00:00 2001
From: Dhanesh R <dhaneshd8999@gmail.com>
Date: Mon, 23 Feb 2026 17:46:08 +0530
Subject: [PATCH] Add Storybook global styling docs (#83)

---
 README.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/README.md b/README.md
index 0c5ca549..f0347ff1 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,30 @@ const CustomGlobalStyle = () => <Global styles={customGlobalStyle} />;
 <CustomGlobalStyle />
 ```
 
+## Using GlobalStyling with Storybook
+
+When rendering components inside Storybook, global styles must be applied at the preview level so that all stories inherit them consistently.
+
+You can achieve this by adding a decorator in your `.storybook/preview.js` (or `preview.tsx`) file.
+
+Example:
+
+```js
+import React from 'react';
+import { global } from '@storybook/design-system';
+
+const { GlobalStyle, loadFontsForStorybook } = global;
+
+loadFontsForStorybook();
+
+export const decorators = [
+  (Story) => (
+    <>
+      <GlobalStyle />
+      <Story />
+    </>
+  ),
+];
 ## Font Loading
 
 Rather than `@import` fonts in the `GlobalStyle` component, the design system's font URL is exported with the intention of using it in a `<link>` tag as the href. Different frameworks and environments handle component re-renders in their own way (a re-render would cause the font to be re-fetched), so this approach allows the design system consumers to choose the font loading method that is most appropriate for their environment.