From 4c37c2bc9b1616278e9eed6b99607ef58ab7157b Mon Sep 17 00:00:00 2001
From: rahim <rahim.alwer@gmail.com>
Date: Tue, 10 Mar 2026 02:02:33 -0700
Subject: [PATCH] docs: move videojs CSS imports to top in React snippets
 (#818)

---
 site/src/content/docs/concepts/_architecture.mdx | 3 ++-
 site/src/content/docs/concepts/_skins.mdx        | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/site/src/content/docs/concepts/_architecture.mdx b/site/src/content/docs/concepts/_architecture.mdx
index 28b4b890..4d34fbd9 100644
--- a/site/src/content/docs/concepts/_architecture.mdx
+++ b/site/src/content/docs/concepts/_architecture.mdx
@@ -74,9 +74,10 @@ Here's a complete example showing all three tiers:
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
-import { VideoProvider, FrostedSkin, Video } from '@videojs/react-preview';
 import '@videojs/react-preview/skins/frosted.css';
 
+import { VideoProvider, FrostedSkin, Video } from '@videojs/react-preview';
+
 function Player() {
   return (
     // Tier 1: State Management
diff --git a/site/src/content/docs/concepts/_skins.mdx b/site/src/content/docs/concepts/_skins.mdx
index c697bcd8..cd7e8b79 100644
--- a/site/src/content/docs/concepts/_skins.mdx
+++ b/site/src/content/docs/concepts/_skins.mdx
@@ -32,9 +32,10 @@ A modern, glassy design with backdrop blur effects and polished interactions.
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
+import '@videojs/react/video/skin.css';
+
 import { createPlayer, Poster } from '@videojs/react';
 import { VideoSkin, Video, videoFeatures } from '@videojs/react/video';
-import '@videojs/react/video/skin.css';
 
 const Player = createPlayer({ features: videoFeatures });
 
@@ -70,9 +71,10 @@ A clean, straightforward design that focuses on simplicity and clarity.
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
+import '@videojs/react/video/minimal-skin.css';
+
 import { createPlayer, Poster } from '@videojs/react';
 import { MinimalVideoSkin, Video, videoFeatures } from '@videojs/react/video';
-import '@videojs/react/video/minimal-skin.css';
 
 const Player = createPlayer({ features: videoFeatures });