From db7193f4682e8833807f8e7dcde3bf4b65d54d80 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@badalic.com>
Date: Thu, 19 Sep 2024 19:43:56 -0400
Subject: [PATCH] Update using-styled-components.mdx

---
 .../frontend/using-styled-components.mdx      | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/develop-docs/frontend/using-styled-components.mdx b/develop-docs/frontend/using-styled-components.mdx
index 9204e920d4ca6..0b6f16a5708ce 100644
--- a/develop-docs/frontend/using-styled-components.mdx
+++ b/develop-docs/frontend/using-styled-components.mdx
@@ -9,12 +9,21 @@ The best styles are the ones you don’t write - whenever possible use existing
 
 ## Basics
 
-To use Style Components pull in `styled` and apply your CSS. For consistent spacing you should also use `space()`:
+To use Style Components, import `styled` from `@emotion/styled` and apply custom CSS. For consistent spacing you should also use `space()`:
 
 ```tsx
 import styled from '@emotion/styled';
 import {space} from 'sentry/styles/space';
 
+export default ExampleComponent() {
+  return (
+    <SideBySide>
+      <p>a number: <Numeric>1</Numeric></p>
+      <p>and another: <Numeric>2</Numeric></p>
+    </SideBySide>
+  )
+}
+
 const Numeric = styled('span')`
   font-variant-numeric: tabular-nums;
 `;
@@ -26,14 +35,6 @@ const SideBySide = styled('div')`
   align-items: flex-start;
 `;
 
-export default ExampleComponent() {
-  return (
-    <SideBySide>
-      <p>a number: <Numeric>1</Numeric></p>
-      <p>and another: <Numeric>2</Numeric></p>
-    </SideBySide>
-  )
-}
 ```
 
 ## Theme