diff --git a/site/src/content/docs/concepts/ui-components.mdx b/site/src/content/docs/concepts/ui-components.mdx index acd53a17..d25a22fc 100644 --- a/site/src/content/docs/concepts/ui-components.mdx +++ b/site/src/content/docs/concepts/ui-components.mdx @@ -43,8 +43,8 @@ Each primitive represents at most **one HTML element**, without internal element Complex components are broken into smaller, composable pieces. This pattern is used for: - **Sliders** - Root, Track, Thumb, Progress, Pointer -- **Tooltips** - Root, Trigger, Positioner, Popup, Arrow, Portal -- **Popovers** - Root, Trigger, Positioner, Popup, Portal +- **Tooltips** - Root, Trigger, Positioner, Popup +- **Popovers** - Root, Trigger, Positioner, Popup Each piece handles one concern, but they work together seamlessly. @@ -98,4 +98,4 @@ Multi-element components for complex interactions: - **TimeSlider** - Seekable timeline with progress - **VolumeSlider** - Volume control slider - **Tooltip** - Hover tooltips with positioning -- **Popover** - Click/hover popovers with collision detection \ No newline at end of file +- **Popover** - Click/hover popovers with collision detection diff --git a/site/src/utils/ejectCodeGenerator.ts b/site/src/utils/ejectCodeGenerator.ts index 7ecadf52..d64600a4 100644 --- a/site/src/utils/ejectCodeGenerator.ts +++ b/site/src/utils/ejectCodeGenerator.ts @@ -46,14 +46,12 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS - - - - Play - Pause - - - + + + Play + Pause + +
@@ -73,13 +71,11 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS - - - - - - - + + + + + @@ -93,18 +89,16 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS - - - - - - - - - - - - + + + + + + + + + + @@ -114,14 +108,12 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS - - - - Enter Fullscreen - Exit Fullscreen - - - + + + Enter Fullscreen + Exit Fullscreen + +
@@ -163,14 +155,12 @@ export default function MinimalSkin({ children, className = '' }: SkinProps): JS - - - - Play - Pause - - - + + + Play + Pause + +
@@ -196,13 +186,11 @@ export default function MinimalSkin({ children, className = '' }: SkinProps): JS - - - - - - - + + + + +
@@ -214,18 +202,16 @@ export default function MinimalSkin({ children, className = '' }: SkinProps): JS - - - - - - - - - - - - + + + + + + + + + + @@ -235,14 +221,12 @@ export default function MinimalSkin({ children, className = '' }: SkinProps): JS - - - - Enter Fullscreen - Exit Fullscreen - - - + + + Enter Fullscreen + Exit Fullscreen + +