From d244dba13e1d1bb7d022912d18242789bb1ba5aa Mon Sep 17 00:00:00 2001
From: sindri <33976067+isarsindri@users.noreply.github.com>
Date: Mon, 2 Mar 2026 14:00:18 +0100
Subject: [PATCH] Fix code block formatting and update comments

---
 docs/tut/crash-course/3-components.md | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/docs/tut/crash-course/3-components.md b/docs/tut/crash-course/3-components.md
index 4cbf679..ef27fa0 100644
--- a/docs/tut/crash-course/3-components.md
+++ b/docs/tut/crash-course/3-components.md
@@ -10,7 +10,7 @@ together.
 
 ::: code-group
 
-```luau [Button.luau]
+```lua [Button.luau]
 local create = vide.create
 
 local function Button(props: {
@@ -32,7 +32,9 @@ local function Button(props: {
 end
 
 return Button
+```
 
+```luau [menu.luau]
 local create = vide.create
 local source = vide.source
 local effect = vide.effect
@@ -67,7 +69,6 @@ local function Menu()
 			end
 		},
 
-		-- Settings menu panel (example usage of Slider component)
 		create "Frame" {
 			AnchorPoint = Vector2.new(0, 1),
 			Position = UDim2.fromOffset(24, 560),
@@ -113,9 +114,9 @@ local function Menu()
 end
 
 return Menu
--- Example of a component that wraps the built-in slider component.
--- This keeps a consistent "component(props) -> Instance" style.
+```
 
+```luau [slider.luau]
 local source = vide.source
 
 export type SliderTheme = {
@@ -132,26 +133,21 @@ export type SliderTheme = {
 }
 
 export type SliderProps = {
-	-- required
 	value: source.source<number>,
 
-	-- range
 	min: number?,
 	max: number?,
 	step: number?,
 
-	-- text
 	label: string?,
 	format: ((number) -> string)?,
 	onChanged: ((number) -> ())?,
 
-	-- layout
 	size: UDim2?,
 	position: UDim2?,
 	anchorPoint: Vector2?,
 	layoutOrder: number?,
 
-	-- style
 	theme: SliderTheme?,
 }
 
@@ -161,4 +157,5 @@ end
 
 return Slider
 ```
+
 :::