diff --git a/src/lib/components/rating/Rating.svelte b/src/lib/components/rating/Rating.svelte
index 39cd91eb..03e288c1 100644
--- a/src/lib/components/rating/Rating.svelte
+++ b/src/lib/components/rating/Rating.svelte
@@ -8,18 +8,17 @@
 	export let size: 'sm' | 'md' | 'lg' = 'md';
 	export let showValue = false;
 
-	let defaultClass = 'rating text-primary';
-
-	defaultClass = twMerge(defaultClass, $$props.class);
-
 	function handleSelect(rating: number) {
 		value = rating;
 	}
+
+	const defaultClass = 'rating text-primary';
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div class="w-full flex flex-row items-center justify-start">
 	<div
-		class={defaultClass}
+		class={finalClass}
 		class:rating-half={half}
 		class:sm={size === 'sm'}
 		class:md={size === 'md'}
diff --git a/src/routes/rating/+page.svelte b/src/routes/rating/+page.svelte
index fe92311f..07a87ece 100644
--- a/src/routes/rating/+page.svelte
+++ b/src/routes/rating/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { Card, Col, Rating } from '../../lib';
+	import { example, halfExample, sizeExample, showValueExample, props } from './examples';
+	import { PropsTable, SlotsTable, CodeBlock } from '../../docs';
 </script>
 
 <Col class="col-24 md:col-12">
@@ -9,6 +11,10 @@
 			<Rating name="rating-1" showValue />
 			<br />
 			<Rating name="rating-2" value={3} class="text-orange-400" />
+
+			<br />
+
+			<CodeBlock language="svelte" code={example} />
 		</Card.Content>
 	</Card>
 </Col>
@@ -20,6 +26,10 @@
 			<Rating name="rating-3" half />
 			<br />
 			<Rating name="rating-4" value={3} half class="text-orange-400" />
+
+			<br />
+
+			<CodeBlock language="svelte" code={halfExample} />
 		</Card.Content>
 	</Card>
 </Col>
@@ -33,6 +43,10 @@
 			<Rating name="rating-6" value={3} class="text-orange-400" />
 			<br />
 			<Rating name="rating-7" value={3} size="lg" class="text-purple-400" />
+
+			<br />
+
+			<CodeBlock language="svelte" code={sizeExample} />
 		</Card.Content>
 	</Card>
 </Col>
@@ -52,6 +66,14 @@
 			<Rating name="rating-9" value={3} half class="text-orange-400" showValue />
 			<br />
 			<Rating name="rating-10" value={3.5} half size="lg" class="text-purple-400" showValue />
+
+			<br />
+
+			<CodeBlock language="svelte" code={showValueExample} />
 		</Card.Content>
 	</Card>
 </Col>
+
+<Col class="col-24">
+	<PropsTable component="Rating" {props} />
+</Col>
diff --git a/src/routes/rating/examples.ts b/src/routes/rating/examples.ts
new file mode 100644
index 00000000..8f11e45f
--- /dev/null
+++ b/src/routes/rating/examples.ts
@@ -0,0 +1,86 @@
+import type { Prop } from '../../docs';
+
+export const props: Prop[] = [
+	{
+		id: '1',
+		prop: 'half',
+		type: 'boolean',
+		default: 'false'
+	},
+	{
+		id: '2',
+		prop: 'outOf',
+		type: 'number',
+		default: '5'
+	},
+	{
+		id: '3',
+		prop: 'name',
+		type: 'string',
+		default: ''
+	},
+	{
+		id: '4',
+		prop: 'value',
+		type: 'number',
+		default: '0'
+	},
+	{
+		id: '5',
+		prop: 'size',
+		type: "'sm' | 'md' | 'lg'",
+		default: 'md'
+	},
+	{
+		id: '6',
+		prop: 'showValue',
+		type: 'boolean',
+		default: 'false'
+	}
+];
+
+export const example = `
+<script lang="ts">
+	import { Rating } from 'stwui';
+</script>
+
+<Rating name="rating-1" showValue />
+<br />
+<Rating name="rating-2" value={3} class="text-orange-400" />`;
+
+export const halfExample = `
+<script lang="ts">
+	import { Rating } from 'stwui';
+</script>
+
+<Rating name="rating-3" half />
+<br />
+<Rating name="rating-4" value={3} half class="text-orange-400" />`;
+
+export const sizeExample = `
+<script lang="ts">
+	import { Rating } from 'stwui';
+</script>
+
+<Rating name="rating-5" size="sm" />
+<br />
+<Rating name="rating-6" value={3} class="text-orange-400" />
+<br />
+<Rating name="rating-7" value={3} size="lg" class="text-purple-400" />`;
+
+export const showValueExample = `
+<script lang="ts">
+	import { Rating } from 'stwui';
+</script>
+
+<Rating name="rating-5" size="sm" showValue />
+<br />
+<Rating name="rating-6" value={3} class="text-orange-400" showValue />
+<br />
+<Rating name="rating-7" value={3} size="lg" class="text-purple-400" showValue />
+<br />
+<Rating name="rating-8" size="sm" half showValue />
+<br />
+<Rating name="rating-9" value={3} half class="text-orange-400" showValue />
+<br />
+<Rating name="rating-10" value={3.5} half size="lg" class="text-purple-400" showValue />`;