docs(www): add block preview image

shadcn-ui · Jan 15, 2025 · d5aa527 · d5aa527
1 parent 5ec990a
commit d5aa527
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/apps/www/content/docs/blocks.mdx b/apps/www/content/docs/blocks.mdx
@@ -153,6 +153,21 @@ pnpm registry:build
 
 Once the build script is finished, you can view your block at `http://localhost:3333/blocks/[CATEGORY]` or a full screen preview at `http://localhost:3333/view/styles/new-york/dashboard-01`.
 
+<Image
+  src="/images/block-preview-light.png"
+  width="1432"
+  height="960"
+  alt="Block preview"
+  className="border dark:hidden shadow-sm rounded-lg overflow-hidden mt-6 w-full"
+/>
+<Image
+  src="/images/block-preview-dark.png"
+  width="1432"
+  height="960"
+  alt="Block preview"
+  className="border hidden dark:block shadow-sm rounded-lg overflow-hidden mt-6 w-full"
+/>
+
 ### Build your block
 
 You can now build your block by editing the files in the block folder and viewing the changes in the browser.

diff --git a/apps/www/public/images/block-preview-dark.png b/apps/www/public/images/block-preview-dark.png
diff --git a/apps/www/public/images/block-preview-light.png b/apps/www/public/images/block-preview-light.png