diff --git a/CHANGELOG.md b/CHANGELOG.md
index a30670d..ec21ff2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Added: Input component
 - Changed: Add button type prop
 - Changed: Use own input component on tabs example
+- Changed: Update all current components with library comments
 
 ## 2024-10-06
 
diff --git a/assets/css/output.css b/assets/css/output.css
index d6d7084..f89da7b 100644
--- a/assets/css/output.css
+++ b/assets/css/output.css
@@ -628,10 +628,6 @@ body {
   }
 }
 
-.pointer-events-none {
-  pointer-events: none;
-}
-
 .static {
   position: static;
 }
@@ -706,10 +702,6 @@ body {
   z-index: 50;
 }
 
-.m-32 {
-  margin: 8rem;
-}
-
 .m-0 {
   margin: 0px;
 }
@@ -807,10 +799,6 @@ body {
   height: 1rem;
 }
 
-.h-5 {
-  height: 1.25rem;
-}
-
 .h-6 {
   height: 1.5rem;
 }
@@ -859,10 +847,6 @@ body {
   width: 1rem;
 }
 
-.w-5 {
-  width: 1.25rem;
-}
-
 .w-6 {
   width: 1.5rem;
 }
@@ -879,10 +863,6 @@ body {
   width: 100%;
 }
 
-.w-1\/2 {
-  width: 50%;
-}
-
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -899,12 +879,8 @@ body {
   max-width: 20rem;
 }
 
-.max-w-xl {
-  max-width: 36rem;
-}
-
-.max-w-lg {
-  max-width: 32rem;
+.max-w-md {
+  max-width: 28rem;
 }
 
 .flex-1 {
@@ -1035,18 +1011,18 @@ body {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
-.space-y-8 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
-}
-
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
 
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -1152,10 +1128,6 @@ body {
   background-color: hsl(var(--secondary) / var(--tw-bg-opacity));
 }
 
-.bg-transparent {
-  background-color: transparent;
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1276,26 +1248,10 @@ body {
   padding-bottom: 2rem;
 }
 
-.pl-10 {
-  padding-left: 2.5rem;
-}
-
-.pl-3 {
-  padding-left: 0.75rem;
-}
-
 .pl-6 {
   padding-left: 1.5rem;
 }
 
-.pr-10 {
-  padding-right: 2.5rem;
-}
-
-.pr-3 {
-  padding-right: 0.75rem;
-}
-
 .pt-0 {
   padding-top: 0px;
 }
@@ -1344,10 +1300,6 @@ body {
   line-height: 1rem;
 }
 
-.text-\[0\.8rem\] {
-  font-size: 0.8rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -1386,11 +1338,6 @@ body {
   color: hsl(var(--card-foreground) / var(--tw-text-opacity));
 }
 
-.text-destructive {
-  --tw-text-opacity: 1;
-  color: hsl(var(--destructive) / var(--tw-text-opacity));
-}
-
 .text-destructive-foreground {
   --tw-text-opacity: 1;
   color: hsl(var(--destructive-foreground) / var(--tw-text-opacity));
@@ -1535,14 +1482,6 @@ body {
           mask-image: linear-gradient(180deg,white,rgba(255,255,255,0));
 }
 
-.file\:mr-4::file-selector-button {
-  margin-right: 1rem;
-}
-
-.file\:rounded-md::file-selector-button {
-  border-radius: calc(var(--radius) - 2px);
-}
-
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
@@ -1551,21 +1490,6 @@ body {
   background-color: transparent;
 }
 
-.file\:bg-secondary::file-selector-button {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--secondary) / var(--tw-bg-opacity));
-}
-
-.file\:px-4::file-selector-button {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.file\:py-2::file-selector-button {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
 .file\:text-sm::file-selector-button {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1575,11 +1499,6 @@ body {
   font-weight: 500;
 }
 
-.file\:text-secondary-foreground::file-selector-button {
-  --tw-text-opacity: 1;
-  color: hsl(var(--secondary-foreground) / var(--tw-text-opacity));
-}
-
 .file\:text-foreground::file-selector-button {
   --tw-text-opacity: 1;
   color: hsl(var(--foreground) / var(--tw-text-opacity));
@@ -1651,15 +1570,6 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:file\:bg-secondary\/80::file-selector-button:hover {
-  background-color: hsl(var(--secondary) / 0.8);
-}
-
-.focus\:border-ring:focus {
-  --tw-border-opacity: 1;
-  border-color: hsl(var(--ring) / var(--tw-border-opacity));
-}
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1680,26 +1590,11 @@ body {
   --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-ring:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: hsl(var(--ring) / var(--tw-ring-opacity));
-}
-
-.focus\:ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
-}
-
 .focus-visible\:outline-none:focus-visible {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
-.focus-visible\:ring-1:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .focus-visible\:ring-2:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
diff --git a/internals/ui/components/card.templ b/internals/ui/components/card.templ
index fd4f0ba..23d5096 100644
--- a/internals/ui/components/card.templ
+++ b/internals/ui/components/card.templ
@@ -1,39 +1,97 @@
 package components
 
+// CardProps defines the properties for the Card component.
 type CardProps struct {
+	// Class specifies additional CSS classes to apply to the card.
+	// Default: "" (empty string)
 	Class string
+
+	// Attributes allows passing additional HTML attributes to the card element.
+	// Default: nil
+	Attributes templ.Attributes
 }
 
+// Card renders a card component based on the provided props.
+// It can be customized with additional classes and attributes.
+//
+// Usage:
+//
+//	@components.Card(components.CardProps{
+//	  Class: "custom-card",
+//	  Attributes: templ.Attributes{"data-testid": "my-card"},
+//	}) {
+//	  // Card content goes here
+//	}
+//
+// Props:
+//   - Class: Additional CSS classes to apply to the card. Default: "" (empty string)
+//   - Attributes: Additional HTML attributes to apply to the card element. Default: nil
 templ Card(props CardProps) {
-	<div class={ "rounded-lg border bg-card text-card-foreground shadow-sm", props.Class }>
+	<div class={ "rounded-lg border bg-card text-card-foreground shadow-sm", props.Class } { props.Attributes... }>
 		{ children... }
 	</div>
 }
 
+// CardHeader renders the header section of a card.
+//
+// Usage:
+//
+//	@components.CardHeader() {
+//	  @components.CardTitle() { Card Title }
+//	  @components.CardDescription() { Card description goes here }
+//	}
 templ CardHeader() {
 	<div class="flex flex-col space-y-1.5 p-6">
 		{ children... }
 	</div>
 }
 
+// CardTitle renders the title of a card.
+//
+// Usage:
+//
+//	@components.CardTitle() {
+//	  My Card Title
+//	}
 templ CardTitle() {
 	<h3 class="font-semibold leading-none tracking-tight">
 		{ children... }
 	</h3>
 }
 
+// CardDescription renders the description of a card.
+//
+// Usage:
+//
+//	@components.CardDescription() {
+//	  This is a detailed description of the card's content.
+//	}
 templ CardDescription() {
 	<p class="text-sm text-muted-foreground">
 		{ children... }
 	</p>
 }
 
+// CardContent renders the main content section of a card.
+//
+// Usage:
+//
+//	@components.CardContent() {
+//	  // Main card content goes here
+//	}
 templ CardContent() {
 	<div class="p-6 pt-0">
 		{ children... }
 	</div>
 }
 
+// CardFooter renders the footer section of a card.
+//
+// Usage:
+//
+//	@components.CardFooter() {
+//	  @components.Button(components.ButtonProps{Text: "Submit"})
+//	}
 templ CardFooter() {
 	<div class="flex items-center p-6 pt-0">
 		{ children... }
diff --git a/internals/ui/components/sheet.templ b/internals/ui/components/sheet.templ
index c95796a..c89bb4c 100644
--- a/internals/ui/components/sheet.templ
+++ b/internals/ui/components/sheet.templ
@@ -1,7 +1,9 @@
 package components
 
+// SheetSide represents the side from which the sheet will appear.
 type SheetSide string
 
+// Constants for sheet sides.
 const (
 	Top    SheetSide = "top"
 	Right  SheetSide = "right"
@@ -9,12 +11,28 @@ const (
 	Left   SheetSide = "left"
 )
 
+// SheetProps defines the properties for the Sheet component.
 type SheetProps struct {
-	Title       string
+	// Title is the heading text for the sheet.
+	// Default: "" (empty string)
+	Title string
+
+	// Description is the subheading or description text for the sheet.
+	// Default: "" (empty string)
 	Description string
-	Side        SheetSide
+
+	// Side determines from which side the sheet will appear.
+	// Default: Right
+	Side SheetSide
 }
 
+// SheetRoot renders the root component for the Sheet, setting up the Alpine.js data and event handlers.
+//
+// Usage:
+//
+//	@components.SheetRoot() {
+//	  // Sheet trigger and content go here
+//	}
 templ SheetRoot() {
 	<div
 		x-data="{ 
@@ -34,6 +52,22 @@ templ SheetRoot() {
 	</div>
 }
 
+// Sheet renders the main sheet component with backdrop and content.
+//
+// Usage:
+//
+//	@components.Sheet(components.SheetProps{
+//	  Title: "Sheet Title",
+//	  Description: "Sheet description goes here",
+//	  Side: components.Right,
+//	}) {
+//	  // Sheet content goes here
+//	}
+//
+// Props:
+//   - Title: The heading text for the sheet. Default: "" (empty string)
+//   - Description: The subheading or description text for the sheet. Default: "" (empty string)
+//   - Side: Determines from which side the sheet will appear. Default: Right
 templ Sheet(props SheetProps) {
 	<!-- Backdrop -->
 	<div
@@ -102,6 +136,17 @@ templ Sheet(props SheetProps) {
 	</div>
 }
 
+// SheetTrigger renders a trigger element that opens the sheet when clicked.
+//
+// Usage:
+//
+//	@components.SheetTrigger("Open Sheet", components.Right) {
+//	  <button>Open Sheet</button>
+//	}
+//
+// Props:
+//   - text: The text content of the trigger (unused in the current implementation)
+//   - side: The side from which the sheet should appear
 templ SheetTrigger(text string, side SheetSide) {
 	<span
 		@click={ "open('" + string(side) + "')" }
@@ -110,6 +155,14 @@ templ SheetTrigger(text string, side SheetSide) {
 	</span>
 }
 
+// SheetClose renders a button that closes the sheet when clicked.
+//
+// Usage:
+//
+//	@components.SheetClose("Close")
+//
+// Props:
+//   - text: The text content of the close button
 templ SheetClose(text string) {
 	<button
 		@click="close()"
diff --git a/internals/ui/components/tabs.templ b/internals/ui/components/tabs.templ
index 247c983..2b2ae1a 100644
--- a/internals/ui/components/tabs.templ
+++ b/internals/ui/components/tabs.templ
@@ -1,17 +1,49 @@
 package components
 
+// Tab represents a single tab in the Tabs component.
 type Tab struct {
-	ID      string
-	Title   string
+	// ID is the unique identifier for the tab.
+	ID string
+
+	// Title is the text displayed on the tab button.
+	Title string
+
+	// Content is the templ.Component to be rendered when the tab is active.
 	Content templ.Component
 }
 
+// TabsProps defines the properties for the Tabs component.
 type TabsProps struct {
-	Tabs                  []Tab
-	TabsContainerClass    string
+	// Tabs is an array of Tab structs representing each tab in the component.
+	Tabs []Tab
+
+	// TabsContainerClass specifies additional CSS classes for the tabs container.
+	// Default: "" (empty string)
+	TabsContainerClass string
+
+	// ContentContainerClass specifies additional CSS classes for the content container.
+	// Default: "" (empty string)
 	ContentContainerClass string
 }
 
+// Tabs renders a tabbed interface component based on the provided props.
+// It uses Alpine.js for interactivity and state management.
+//
+// Usage:
+//
+//	@components.Tabs(components.TabsProps{
+//	  Tabs: []components.Tab{
+//	    {ID: "1", Title: "Tab 1", Content: Tab1Content()},
+//	    {ID: "2", Title: "Tab 2", Content: Tab2Content()},
+//	  },
+//	  TabsContainerClass: "w-full max-w-md",
+//	  ContentContainerClass: "mt-4",
+//	})
+//
+// Props:
+//   - Tabs: An array of Tab structs, each representing a tab in the interface.
+//   - TabsContainerClass: Additional CSS classes for the tabs container. Default: "" (empty string)
+//   - ContentContainerClass: Additional CSS classes for the content container. Default: "" (empty string)
 templ Tabs(props TabsProps) {
 	<div
 		x-data="{     
@@ -33,12 +65,14 @@ templ Tabs(props TabsProps) {
 		x-init="$nextTick(() => tabRepositionMarker($refs.tabButtons.firstElementChild));"
 		class="relative"
 	>
+		<!-- Tabs buttons container -->
 		<div
 			x-ref="tabButtons"
 			class={ "relative flex items-center justify-center h-10 p-1 rounded-lg select-none",
 				"bg-muted text-muted-foreground",
 				props.TabsContainerClass }
 		>
+			<!-- Individual tab buttons -->
 			for _, tab := range props.Tabs {
 				<button
 					:id="$id(tabId)"
@@ -50,11 +84,14 @@ templ Tabs(props TabsProps) {
 					{ tab.Title }
 				</button>
 			}
+			<!-- Active tab marker -->
 			<div x-ref="tabMarker" class="absolute left-0 z-10 h-full duration-300 ease-out" x-cloak>
 				<div class="w-full h-full bg-background rounded-md shadow-sm"></div>
 			</div>
 		</div>
+		<!-- Tab content container -->
 		<div class={ "relative mt-2 content", props.ContentContainerClass }>
+			<!-- Individual tab content -->
 			for _, tab := range props.Tabs {
 				<div
 					:id="$id(tabId + '-content')"