diff --git a/packages/docs/components/decorative-box/decorative-box.module.css b/packages/docs/components/decorative-box/decorative-box.module.css
index 0040da4c19..3e38de101a 100644
--- a/packages/docs/components/decorative-box/decorative-box.module.css
+++ b/packages/docs/components/decorative-box/decorative-box.module.css
@@ -1,10 +1,11 @@
 .decorativeBox {
   --sl-local-height: 100%;
+  --sl-local-width: 100%;
   --sl-local-bg: var(--sl-color-gray-3);
   --sl-local-bc: var(--sl-color-gray-6);
 
   height: var(--sl-local-height);
-  width: 100%;
+  width: var(--sl-local-width);
   background-clip: padding-box;
   background-color: var(--sl-local-bg);
   border: 1px solid var(--sl-local-bc);
diff --git a/packages/docs/components/decorative-box/decorative-box.tsx b/packages/docs/components/decorative-box/decorative-box.tsx
index 68f56a1999..b87be22b7e 100644
--- a/packages/docs/components/decorative-box/decorative-box.tsx
+++ b/packages/docs/components/decorative-box/decorative-box.tsx
@@ -8,6 +8,8 @@ export function DecorativeBox(props: DecorativeBoxProps) {
   const {
     style: styleOverride,
     height = '100%',
+    width = '100%',
+
     className = '',
     color = 'gray',
     ...rest
@@ -17,6 +19,7 @@ export function DecorativeBox(props: DecorativeBoxProps) {
     <div
       style={style({
         '--sl-local-height': height,
+        '--sl-local-width': width,
         '--sl-local-bg': `var(--sl-color-${color}-3)`,
         '--sl-local-bc': `var(--sl-color-${color}-6)`,
         ...styleOverride,
@@ -33,6 +36,11 @@ interface DecorativeBoxProps extends ComponentPropsWithoutRef<'div'> {
    * @default '100%''
    */
   height?: string
+  /**
+   * Component width
+   * @default '100%''
+   */
+  width?: string
   /**
    * Decorative color
    * @default 'gray'
diff --git a/packages/docs/components/preview/preview.module.css b/packages/docs/components/preview/preview.module.css
index d2da7e7d95..b39eff77b3 100644
--- a/packages/docs/components/preview/preview.module.css
+++ b/packages/docs/components/preview/preview.module.css
@@ -9,6 +9,7 @@
 .previewWrapper {
   padding: var(--space);
   min-height: var(--min-h);
+  height: fit-content;
   border-radius: var(--radii);
   background-color: color-mix(
     in srgb,
@@ -19,6 +20,10 @@
   overflow-x: auto;
 }
 
+.previewWrapper[data-fixed-height='true'] {
+  height: var(--min-h);
+}
+
 .codeWrapper > pre {
   padding: var(--space);
   min-height: var(--min-h);
diff --git a/packages/docs/components/preview/preview.tsx b/packages/docs/components/preview/preview.tsx
index 970d0eb2b5..2a2e7867f5 100644
--- a/packages/docs/components/preview/preview.tsx
+++ b/packages/docs/components/preview/preview.tsx
@@ -16,7 +16,7 @@ import styles from './preview.module.css'
 import { useClipboard } from '../hooks/use-clipboard'
 
 export function Preview(props: Props) {
-  const { name } = props
+  const { name, fixedHeight = false } = props
 
   const [activeId, setActiveId] = useState<string>('preview')
   const { isCopied, handleCopy } = useClipboard()
@@ -44,7 +44,12 @@ export function Preview(props: Props) {
         </TabList>
         <TabPanel>
           <Suspense fallback={<Spinner description="Loading component" />}>
-            <div className={styles.previewWrapper}>{Preview}</div>
+            <div
+              className={styles.previewWrapper}
+              data-fixed-height={fixedHeight}
+            >
+              {Preview}
+            </div>
           </Suspense>
         </TabPanel>
         <TabPanel style={{ position: 'relative' }}>
@@ -70,4 +75,5 @@ export function Preview(props: Props) {
 
 interface Props {
   name: string
+  fixedHeight: boolean
 }
diff --git a/packages/docs/examples/bleed.tsx b/packages/docs/examples/bleed.tsx
index 09c03332d9..e5f065152b 100644
--- a/packages/docs/examples/bleed.tsx
+++ b/packages/docs/examples/bleed.tsx
@@ -1,10 +1,15 @@
 import React from 'react'
-import { Bleed, Button } from '@vtex/shoreline'
+import { Bleed, Button, IconCaretLeft } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
 
 export default function Example() {
   return (
-    <Bleed top="$space-2" bottom="$space-2">
-      <Button>Text</Button>
-    </Bleed>
+    <DecorativeBox color="blue">
+      <Bleed top="$space-2" bottom="$space-2" start="$space-2">
+        <Button variant="tertiary">
+          <IconCaretLeft /> Action
+        </Button>
+      </Bleed>
+    </DecorativeBox>
   )
 }
diff --git a/packages/docs/examples/center.tsx b/packages/docs/examples/center.tsx
index bec9139bf3..7b28ec82d0 100644
--- a/packages/docs/examples/center.tsx
+++ b/packages/docs/examples/center.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
-import { Center, Text } from '@vtex/shoreline'
+import { Center } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
 
 export default function Example() {
   return (
     <Center>
-      <Text variant="body">Centered content</Text>
+      <DecorativeBox width="64px" height="64px" />
     </Center>
   )
 }
diff --git a/packages/docs/examples/flex.tsx b/packages/docs/examples/flex.tsx
new file mode 100644
index 0000000000..0eae0f8f19
--- /dev/null
+++ b/packages/docs/examples/flex.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Flex } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Flex>
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+    </Flex>
+  )
+}
diff --git a/packages/docs/examples/grid-cell.tsx b/packages/docs/examples/grid-cell.tsx
new file mode 100644
index 0000000000..71ba6e701b
--- /dev/null
+++ b/packages/docs/examples/grid-cell.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { Grid, GridCell } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Grid columns="repeat(3, 1fr)" rows="repeat(2, 64px)">
+      <GridCell>
+        <DecorativeBox />
+      </GridCell>
+      <GridCell>
+        <DecorativeBox />
+      </GridCell>
+      <GridCell>
+        <DecorativeBox />
+      </GridCell>
+      <GridCell>
+        <DecorativeBox />
+      </GridCell>
+      <GridCell>
+        <DecorativeBox />
+      </GridCell>
+      <GridCell>
+        <DecorativeBox />
+      </GridCell>
+    </Grid>
+  )
+}
diff --git a/packages/docs/examples/grid.tsx b/packages/docs/examples/grid.tsx
new file mode 100644
index 0000000000..c9b1902d91
--- /dev/null
+++ b/packages/docs/examples/grid.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Grid } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Grid columns="repeat(3, 1fr)" rows="repeat(2, 64px)">
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+      <DecorativeBox />
+    </Grid>
+  )
+}
diff --git a/packages/docs/examples/stack-fluid.tsx b/packages/docs/examples/stack-fluid.tsx
new file mode 100644
index 0000000000..38a81c83e8
--- /dev/null
+++ b/packages/docs/examples/stack-fluid.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Stack } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Stack fluid>
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+    </Stack>
+  )
+}
diff --git a/packages/docs/examples/stack-horizontal.tsx b/packages/docs/examples/stack-horizontal.tsx
new file mode 100644
index 0000000000..15a619040e
--- /dev/null
+++ b/packages/docs/examples/stack-horizontal.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Stack } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Stack horizontal>
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+      <DecorativeBox height="64px" />
+    </Stack>
+  )
+}
diff --git a/packages/docs/examples/stack.tsx b/packages/docs/examples/stack.tsx
new file mode 100644
index 0000000000..f654251f81
--- /dev/null
+++ b/packages/docs/examples/stack.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Stack } from '@vtex/shoreline'
+import { DecorativeBox } from '../components/decorative-box'
+
+export default function Example() {
+  return (
+    <Stack>
+      <DecorativeBox width="128px" height="64px" />
+      <DecorativeBox width="128px" height="64px" />
+      <DecorativeBox width="128px" height="64px" />
+    </Stack>
+  )
+}
diff --git a/packages/docs/pages/components/center.mdx b/packages/docs/pages/components/center.mdx
index a19e6e82c1..c1b754fb82 100644
--- a/packages/docs/pages/components/center.mdx
+++ b/packages/docs/pages/components/center.mdx
@@ -2,7 +2,7 @@
 
 <ComponentDescription name="center" />
 
-<Preview name="center" />
+<Preview name="center" fixedHeight />
 
 ## Optional props
 
diff --git a/packages/docs/pages/components/flex.mdx b/packages/docs/pages/components/flex.mdx
index 3f9b82e382..ead6117673 100644
--- a/packages/docs/pages/components/flex.mdx
+++ b/packages/docs/pages/components/flex.mdx
@@ -1,5 +1,9 @@
 # Flex
 
-A component that represents a flexbox layout.
+<ComponentDescription name="flex" />
 
-![Flex example](public/assets/overview-flex.webp)
\ No newline at end of file
+<Preview name="flex" />
+
+## Optional props
+
+<PropsDocs name="flex" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/flex/_meta.json b/packages/docs/pages/components/flex/_meta.json
deleted file mode 100644
index dd335de314..0000000000
--- a/packages/docs/pages/components/flex/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference" }
diff --git a/packages/docs/pages/components/flex/api-reference.mdx b/packages/docs/pages/components/flex/api-reference.mdx
deleted file mode 100644
index 81b87394a0..0000000000
--- a/packages/docs/pages/components/flex/api-reference.mdx
+++ /dev/null
@@ -1,108 +0,0 @@
-# API Reference
-
-Flexbox layout
-
-```jsx
-<Flex>
-  <Button>Clear</Button>
-  <Button variant="primary">Submit</Button>
-</Flex>
-```
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-components.FlexProps & @types/react.React.RefAttributes<typescript.HTMLDivElement>`
-
-## Props
-
-### `align` (optional)
-
-CSS align-items
-
-- Type: `csstype.Property.AlignItems`
-
-- Default: `'stretch'`
-
-### `asChild` (optional)
-
-Children composition
-
-- Type: `boolean`
-
-- Default: `false`
-
-### `basis` (optional)
-
-CSS flex-basis
-
-- Type: `csstype.Property.FlexBasis<0 | string & { }>`
-
-- Default: `'auto'`
-
-### `direction` (optional)
-
-CSS flex-direction
-
-- Type: `csstype.Property.FlexDirection`
-
-- Default: `'row'`
-
-### `gap` (optional)
-
-CSS Gap
-
-- Type: `csstype.Property.Gap<0 | string & { }>`
-
-- Default: `'$space-gap'`
-
-### `grow` (optional)
-
-CSS flex-grow
-
-- Type: `csstype.Property.FlexGrow`
-
-- Default: `0`
-
-### `inline` (optional)
-
-Use `inline-flex` instead of `flex`
-
-- Type: `boolean`
-
-- Default: `false`
-
-### `justify` (optional)
-
-CSS justify-content
-
-- Type: `csstype.Property.JustifyContent`
-
-- Default: `'flex-start'`
-
-### `order` (optional)
-
-CSS order
-
-- Type: `csstype.Property.Order`
-
-- Default: `0`
-
-### `shrink` (optional)
-
-CSS flex-shrink
-
-- Type: `csstype.Property.FlexShrink`
-
-- Default: `1`
-
-### `wrap` (optional)
-
-CSS flex-wrap
-
-- Type: `csstype.Property.FlexWrap`
-
-- Default: `'nowrap'`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/components/src/flex/flex.tsx#L17)
diff --git a/packages/docs/pages/components/grid.mdx b/packages/docs/pages/components/grid.mdx
index 0c3a48c251..be62db3ee7 100644
--- a/packages/docs/pages/components/grid.mdx
+++ b/packages/docs/pages/components/grid.mdx
@@ -1,5 +1,13 @@
 # Grid
 
-A component that represents a grid layout.
+<ComponentDescription name="grid" />
 
-![Grid example](public/assets/overview-grid.webp)
\ No newline at end of file
+<Preview name="grid" />
+
+## Required props
+
+<PropsDocs name="grid" required />
+
+## Optional props
+
+<PropsDocs name="grid" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/grid/_meta.json b/packages/docs/pages/components/grid/_meta.json
index bcdba5306c..3a023a7c83 100644
--- a/packages/docs/pages/components/grid/_meta.json
+++ b/packages/docs/pages/components/grid/_meta.json
@@ -1 +1 @@
-{ "api-reference": "API Reference", "grid-cell": "GridCell" }
+{ "grid-cell": "GridCell" }
diff --git a/packages/docs/pages/components/grid/api-reference.mdx b/packages/docs/pages/components/grid/api-reference.mdx
deleted file mode 100644
index accb0031f9..0000000000
--- a/packages/docs/pages/components/grid/api-reference.mdx
+++ /dev/null
@@ -1,86 +0,0 @@
-# API Reference
-
-Grid layout
-
-```jsx
-<Grid columns="repeat(3, 1fr)">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-  <div>Item 4</div>
-</Grid>
-```
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-components.GridProps & @types/react.React.RefAttributes<typescript.HTMLDivElement>`
-
-## Props
-
-### `areas` (optional)
-
-CSS grid-template-areas
-
-- Type: `csstype.Property.GridTemplateAreas`
-
-- Default: `'auto'`
-
-### `asChild` (optional)
-
-Children composition
-
-- Type: `boolean`
-
-- Default: `false`
-
-### `autoColumns` (optional)
-
-CSS grid-auto-columns
-
-- Type: `csstype.Property.GridAutoColumns<0 | string & { }>`
-
-- Default: `'auto'`
-
-### `autoFlow` (optional)
-
-CSS grid-auto-flow
-
-- Type: `csstype.Property.GridAutoFlow`
-
-- Default: `'row'`
-
-### `autoRows` (optional)
-
-CSS grid-auto-rows
-
-- Type: `csstype.Property.GridAutoRows<0 | string & { }>`
-
-- Default: `'auto'`
-
-### `columns` (optional)
-
-CSS grid-template-columns
-
-- Type: `csstype.Property.GridTemplateColumns<0 | string & { }>`
-
-- Default: `'auto'`
-
-### `gap` (optional)
-
-CSS Gap
-
-- Type: `csstype.Property.GridGap<0 | string & { }>`
-
-- Default: `'$space-gap'`
-
-### `rows` (optional)
-
-CSS grid-template-rows
-
-- Type: `csstype.Property.GridTemplateRows<0 | string & { }>`
-
-- Default: `'auto'`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/components/src/grid/grid.tsx#L19)
diff --git a/packages/docs/pages/components/grid/grid-cell.mdx b/packages/docs/pages/components/grid/grid-cell.mdx
index d9624dce5d..5b7026eb30 100644
--- a/packages/docs/pages/components/grid/grid-cell.mdx
+++ b/packages/docs/pages/components/grid/grid-cell.mdx
@@ -1,3 +1,9 @@
 # GridCell
 
-![No-visual component](public/assets/no-visual-component.webp)
\ No newline at end of file
+<ComponentDescription name="grid-cell" />
+
+<Preview name="grid-cell" />
+
+## Optional props
+
+<PropsDocs name="grid-cell" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/grid/grid-cell/_meta.json b/packages/docs/pages/components/grid/grid-cell/_meta.json
deleted file mode 100644
index dd335de314..0000000000
--- a/packages/docs/pages/components/grid/grid-cell/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference" }
diff --git a/packages/docs/pages/components/grid/grid-cell/api-reference.mdx b/packages/docs/pages/components/grid/grid-cell/api-reference.mdx
deleted file mode 100644
index 75f02bdec6..0000000000
--- a/packages/docs/pages/components/grid/grid-cell/api-reference.mdx
+++ /dev/null
@@ -1,86 +0,0 @@
-# API Reference
-
-Optional cell of a grid layout
-
-```jsx
-<Grid columns="repeat(3, 1fr)">
-  <GridCell>Item 1</GridCell>
-  <GridCell>Item 2</GridCell>
-  <GridCell>Item 3</GridCell>
-  <GridCell>Item 4</GridCell>
-</Grid>
-```
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-components.GridCellProps & @types/react.React.RefAttributes<typescript.HTMLDivElement>`
-
-## Props
-
-### `area` (optional)
-
-CSS grid-area
-
-- Type: `csstype.Property.GridArea`
-
-- Default: `'auto'`
-
-### `asChild` (optional)
-
-Children composition
-
-- Type: `boolean`
-
-- Default: `false`
-
-### `column` (optional)
-
-CSS grid-column
-
-- Type: `csstype.Property.GridColumn`
-
-- Default: `'auto'`
-
-### `columnEnd` (optional)
-
-CSS grid-column-end
-
-- Type: `csstype.Property.GridColumnEnd`
-
-- Default: `'auto'`
-
-### `columnStart` (optional)
-
-CSS grid-column-start
-
-- Type: `csstype.Property.GridColumnStart`
-
-- Default: `'auto'`
-
-### `row` (optional)
-
-CSS grid-row
-
-- Type: `csstype.Property.GridRow`
-
-- Default: `'auto'`
-
-### `rowEnd` (optional)
-
-CSS grid-row-end
-
-- Type: `csstype.Property.GridRowEnd`
-
-- Default: `'auto'`
-
-### `rowStart` (optional)
-
-CSS grid-row-start
-
-- Type: `csstype.Property.GridRowStart`
-
-- Default: `'auto'`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/components/src/grid/grid-cell.tsx#L19)
diff --git a/packages/docs/pages/components/slot.mdx b/packages/docs/pages/components/slot.mdx
index 3fbe5af4f6..ac30e42cef 100644
--- a/packages/docs/pages/components/slot.mdx
+++ b/packages/docs/pages/components/slot.mdx
@@ -1,5 +1,11 @@
 # Slot
 
-Placeholder for stuctural composition.
+<ComponentDescription name="slot" />
 
-![Slot example](public/assets/overview-slot.webp)
\ No newline at end of file
+```jsx
+<Slot>Content</Slot>
+```
+
+## Optional props
+
+<PropsDocs name="slot" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/slot/_meta.json b/packages/docs/pages/components/slot/_meta.json
deleted file mode 100644
index dd335de314..0000000000
--- a/packages/docs/pages/components/slot/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference" }
diff --git a/packages/docs/pages/components/slot/api-reference.mdx b/packages/docs/pages/components/slot/api-reference.mdx
deleted file mode 100644
index 18e5c147c9..0000000000
--- a/packages/docs/pages/components/slot/api-reference.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
-# API Reference
-
-Placeholder for stuctural composition
-
-```jsx
-<Slot>Content</Slot>
-```
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-components.SlotProps & @types/react.React.RefAttributes<typescript.HTMLDivElement>`
-
-## Props
-
-### `asChild` (optional)
-
-Children composition
-
-- Type: `boolean`
-
-- Default: `false`
-
-### `children` (optional)
-
-Children prop
-
-- Type: `@types/react.React.ReactNode`
-
-### `className` (optional)
-
-ClassName used for styling
-
-- Type: `string`
-
-### `name` (optional)
-
-Optional slot label
-
-- Type: `string`
-
-### `style` (optional)
-
-Style property
-
-- Type: `@types/react.React.CSSProperties`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/components/src/slot/slot.tsx#L13)
diff --git a/packages/docs/pages/components/stack.mdx b/packages/docs/pages/components/stack.mdx
index e5203e512e..0c63ea6cd5 100644
--- a/packages/docs/pages/components/stack.mdx
+++ b/packages/docs/pages/components/stack.mdx
@@ -1,5 +1,19 @@
 # Stack
 
-Spaces elements consistently.
+<ComponentDescription name="stack" />
 
-![Stack example](public/assets/overview-stack.webp)
\ No newline at end of file
+<Preview name="stack" />
+
+## Examples
+
+### Horizontal
+
+<Preview name="stack-horizontal" />
+
+### Fluid
+
+<Preview name="stack-fluid" />
+
+## Optional props
+
+<PropsDocs name="stack" />
\ No newline at end of file
diff --git a/packages/docs/pages/components/stack/_meta.json b/packages/docs/pages/components/stack/_meta.json
deleted file mode 100644
index dd335de314..0000000000
--- a/packages/docs/pages/components/stack/_meta.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "api-reference": "API Reference" }
diff --git a/packages/docs/pages/components/stack/api-reference.mdx b/packages/docs/pages/components/stack/api-reference.mdx
deleted file mode 100644
index 0abd8feb55..0000000000
--- a/packages/docs/pages/components/stack/api-reference.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-# API Reference
-
-Spaces elements consistently
-
-```jsx
-<Stack>
-  <div>Stacked 1</div>
-  <div>Stacked 2</div>
-</Stack>
-```
-
-## Parameters
-
-### `props`
-
-- Type: `@vtex/shoreline-components.StackProps & @types/react.React.RefAttributes<typescript.HTMLDivElement>`
-
-## Props
-
-### `align` (optional)
-
-items alignment
-
-- Type: `end | start`
-
-- Default: `start`
-
-### `asChild` (optional)
-
-Children composition
-
-- Type: `boolean`
-
-- Default: `false`
-
-### `fluid` (optional)
-
-Grows the width of items to match the parent
-
-- Type: `boolean`
-
-- Default: `false`
-
-### `horizontal` (optional)
-
-Switches the layout to horizontal
-
-- Type: `boolean`
-
-- Default: `false`
-
-### `space` (optional)
-
-space between items
-
-- Type: `string`
-
-- Default: `0`
-
-[View source](https://github.com/vtex/shoreline/blob/7e03f7690/packages/components/src/stack/stack.tsx#L16)
diff --git a/packages/docs/pages/global.css b/packages/docs/pages/global.css
index efe470ffa8..9676028b25 100644
--- a/packages/docs/pages/global.css
+++ b/packages/docs/pages/global.css
@@ -1,3 +1,14 @@
+/**
+* Nextra Overrides
+*/
+
 h2.nx-border-b {
   border: none;
 }
+
+input:focus-visible,
+button:focus-visible {
+  --tw-ring-shadow: 0 !important;
+  --tw-ring-offset-shadow: 0 !important;
+  --tw-ring-opacity: 0 !important;
+}