diff --git a/packages/shadcn/src/catalog.ts b/packages/shadcn/src/catalog.ts
index 51196083..0c3df852 100644
--- a/packages/shadcn/src/catalog.ts
+++ b/packages/shadcn/src/catalog.ts
@@ -16,6 +16,12 @@ const validationCheckSchema = z
 
 const validateOnSchema = z.enum(["change", "blur", "submit"]).nullable();
 
+/**
+ * Optional className prop for custom styling.
+ * All shadcn components accept this prop to allow style overrides.
+ */
+const classNameProp = z.string().nullable();
+
 // =============================================================================
 // shadcn/ui Component Definitions
 // =============================================================================
@@ -37,6 +43,7 @@ export const shadcnComponentDefinitions = {
       description: z.string().nullable(),
       maxWidth: z.enum(["sm", "md", "lg", "full"]).nullable(),
       centered: z.boolean().nullable(),
+      className: classNameProp,
     }),
     slots: ["default"],
     description:
@@ -52,6 +59,7 @@ export const shadcnComponentDefinitions = {
       justify: z
         .enum(["start", "center", "end", "between", "around"])
         .nullable(),
+      className: classNameProp,
     }),
     slots: ["default"],
     description: "Flex container for layouts",
@@ -62,6 +70,7 @@ export const shadcnComponentDefinitions = {
     props: z.object({
       columns: z.number().nullable(),
       gap: z.enum(["sm", "md", "lg"]).nullable(),
+      className: classNameProp,
     }),
     slots: ["default"],
     description: "Grid layout (1-6 columns)",
@@ -71,6 +80,7 @@ export const shadcnComponentDefinitions = {
   Separator: {
     props: z.object({
       orientation: z.enum(["horizontal", "vertical"]).nullable(),
+      className: classNameProp,
     }),
     description: "Visual separator line",
   },
@@ -81,10 +91,12 @@ export const shadcnComponentDefinitions = {
         z.object({
           label: z.string(),
           value: z.string(),
-        }),
+        
+      className: classNameProp,}),
       ),
       defaultValue: z.string().nullable(),
       value: z.string().nullable(),
+      className: classNameProp,
     }),
     slots: ["default"],
     events: ["change"],
@@ -98,9 +110,11 @@ export const shadcnComponentDefinitions = {
         z.object({
           title: z.string(),
           content: z.string(),
-        }),
+        
+      className: classNameProp,}),
       ),
       type: z.enum(["single", "multiple"]).nullable(),
+      className: classNameProp,
     }),
     description:
       "Collapsible sections. Items as [{title, content}]. Type 'single' (default) or 'multiple'.",
@@ -110,6 +124,7 @@ export const shadcnComponentDefinitions = {
     props: z.object({
       title: z.string(),
       defaultOpen: z.boolean().nullable(),
+      className: classNameProp,
     }),
     slots: ["default"],
     description: "Collapsible section with trigger. Children render inside.",
@@ -120,6 +135,7 @@ export const shadcnComponentDefinitions = {
       title: z.string(),
       description: z.string().nullable(),
       openPath: z.string(),
+      className: classNameProp,
     }),
     slots: ["default"],
     description:
@@ -131,6 +147,7 @@ export const shadcnComponentDefinitions = {
       title: z.string(),
       description: z.string().nullable(),
       openPath: z.string(),
+      className: classNameProp,
     }),
     slots: ["default"],
     description:
@@ -143,8 +160,10 @@ export const shadcnComponentDefinitions = {
         z.object({
           title: z.string().nullable(),
           description: z.string().nullable(),
-        }),
+        
+      className: classNameProp,}),
       ),
+      className: classNameProp,
     }),
     description: "Horizontally scrollable carousel of cards.",
   },
@@ -158,7 +177,8 @@ export const shadcnComponentDefinitions = {
       columns: z.array(z.string()),
       rows: z.array(z.array(z.string())),
       caption: z.string().nullable(),
-    }),
+    
+      className: classNameProp,}),
     description:
       'Data table. columns: header labels. rows: 2D array of cell strings, e.g. [["Alice","admin"],["Bob","user"]].',
     example: {
@@ -174,7 +194,8 @@ export const shadcnComponentDefinitions = {
     props: z.object({
       text: z.string(),
       level: z.enum(["h1", "h2", "h3", "h4"]).nullable(),
-    }),
+    
+      className: classNameProp,}),
     description: "Heading text (h1-h4)",
     example: { text: "Welcome", level: "h1" },
   },
@@ -183,7 +204,8 @@ export const shadcnComponentDefinitions = {
     props: z.object({
       text: z.string(),
       variant: z.enum(["body", "caption", "muted", "lead", "code"]).nullable(),
-    }),
+    
+      className: classNameProp,}),
     description: "Paragraph text",
     example: { text: "Hello, world!" },
   },
@@ -194,7 +216,8 @@ export const shadcnComponentDefinitions = {
       alt: z.string(),
       width: z.number().nullable(),
       height: z.number().nullable(),
-    }),
+    
+      className: classNameProp,}),
     description:
       "Image component. Renders an img tag when src is provided, otherwise a placeholder.",
   },
@@ -204,7 +227,8 @@ export const shadcnComponentDefinitions = {
       src: z.string().nullable(),
       name: z.string(),
       size: z.enum(["sm", "md", "lg"]).nullable(),
-    }),
+    
+      className: classNameProp,}),
     description: "User avatar with fallback initials",
     example: { name: "Jane Doe", size: "md" },
   },
@@ -215,7 +239,8 @@ export const shadcnComponentDefinitions = {
       variant: z
         .enum(["default", "secondary", "destructive", "outline"])
         .nullable(),
-    }),
+    
+      className: classNameProp,}),
     description: "Status badge",
     example: { text: "Active", variant: "default" },
   },
@@ -225,7 +250,8 @@ export const shadcnComponentDefinitions = {
       title: z.string(),
       message: z.string().nullable(),
       type: z.enum(["info", "success", "warning", "error"]).nullable(),
-    }),
+    
+      className: classNameProp,}),
     description: "Alert banner",
     example: {
       title: "Note",
@@ -239,7 +265,8 @@ export const shadcnComponentDefinitions = {
       value: z.number(),
       max: z.number().nullable(),
       label: z.string().nullable(),
-    }),
+    
+      className: classNameProp,}),
     description: "Progress bar (value 0-100)",
     example: { value: 65, max: 100, label: "Upload progress" },
   },
@@ -249,7 +276,8 @@ export const shadcnComponentDefinitions = {
       width: z.string().nullable(),
       height: z.string().nullable(),
       rounded: z.boolean().nullable(),
-    }),
+    
+      className: classNameProp,}),
     description: "Loading placeholder skeleton",
   },
 
@@ -257,7 +285,8 @@ export const shadcnComponentDefinitions = {
     props: z.object({
       size: z.enum(["sm", "md", "lg"]).nullable(),
       label: z.string().nullable(),
-    }),
+    
+      className: classNameProp,}),
     description: "Loading spinner indicator",
   },
 
@@ -265,7 +294,8 @@ export const shadcnComponentDefinitions = {
     props: z.object({
       content: z.string(),
       text: z.string(),
-    }),
+    
+      className: classNameProp,}),
     description: "Hover tooltip. Shows content on hover over text.",
   },
 
@@ -273,7 +303,8 @@ export const shadcnComponentDefinitions = {
     props: z.object({
       trigger: z.string(),
       content: z.string(),
-    }),
+    
+      className: classNameProp,}),
     description: "Popover that appears on click of trigger.",
   },
 
@@ -290,7 +321,8 @@ export const shadcnComponentDefinitions = {
       value: z.string().nullable(),
       checks: validationCheckSchema,
       validateOn: validateOnSchema,
-    }),
+    
+      className: classNameProp,}),
     events: ["submit", "focus", "blur"],
     description:
       "Text input field. Use { $bindState } on value for two-way binding. Use checks for validation (e.g. required, email, minLength). validateOn controls timing (default: blur).",
@@ -311,7 +343,8 @@ export const shadcnComponentDefinitions = {
       value: z.string().nullable(),
       checks: validationCheckSchema,
       validateOn: validateOnSchema,
-    }),
+    
+      className: classNameProp,}),
     description:
       "Multi-line text input. Use { $bindState } on value for binding. Use checks for validation. validateOn controls timing (default: blur).",
   },
@@ -325,7 +358,8 @@ export const shadcnComponentDefinitions = {
       value: z.string().nullable(),
       checks: validationCheckSchema,
       validateOn: validateOnSchema,
-    }),
+    
+      className: classNameProp,}),
     events: ["change"],
     description:
       "Dropdown select input. Use { $bindState } on value for binding. Use checks for validation. validateOn controls timing (default: change).",
@@ -338,7 +372,8 @@ export const shadcnComponentDefinitions = {
       checked: z.boolean().nullable(),
       checks: validationCheckSchema,
       validateOn: validateOnSchema,
-    }),
+    
+      className: classNameProp,}),
     events: ["change"],
     description:
       "Checkbox input. Use { $bindState } on checked for binding. Use checks for validation. validateOn controls timing (default: change).",
@@ -352,7 +387,8 @@ export const shadcnComponentDefinitions = {
       value: z.string().nullable(),
       checks: validationCheckSchema,
       validateOn: validateOnSchema,
-    }),
+    
+      className: classNameProp,}),
     events: ["change"],
     description:
       "Radio button group. Use { $bindState } on value for binding. Use checks for validation. validateOn controls timing (default: change).",
@@ -365,7 +401,8 @@ export const shadcnComponentDefinitions = {
       checked: z.boolean().nullable(),
       checks: validationCheckSchema,
       validateOn: validateOnSchema,
-    }),
+    
+      className: classNameProp,}),
     events: ["change"],
     description:
       "Toggle switch. Use { $bindState } on checked for binding. Use checks for validation. validateOn controls timing (default: change).",
@@ -378,7 +415,8 @@ export const shadcnComponentDefinitions = {
       max: z.number().nullable(),
       step: z.number().nullable(),
       value: z.number().nullable(),
-    }),
+    
+      className: classNameProp,}),
     events: ["change"],
     description: "Range slider input. Use { $bindState } on value for binding.",
   },
@@ -392,7 +430,8 @@ export const shadcnComponentDefinitions = {
       label: z.string(),
       variant: z.enum(["primary", "secondary", "danger"]).nullable(),
       disabled: z.boolean().nullable(),
-    }),
+    
+      className: classNameProp,}),
     events: ["press"],
     description: "Clickable button. Bind on.press for handler.",
     example: { label: "Submit", variant: "primary" },
@@ -402,7 +441,8 @@ export const shadcnComponentDefinitions = {
     props: z.object({
       label: z.string(),
       href: z.string(),
-    }),
+    
+      className: classNameProp,}),
     events: ["press"],
     description: "Anchor link. Bind on.press for click handler.",
   },
@@ -414,7 +454,8 @@ export const shadcnComponentDefinitions = {
         z.object({
           label: z.string(),
           value: z.string(),
-        }),
+        
+      className: classNameProp,}),
       ),
       value: z.string().nullable(),
     }),
@@ -428,7 +469,8 @@ export const shadcnComponentDefinitions = {
       label: z.string(),
       pressed: z.boolean().nullable(),
       variant: z.enum(["default", "outline"]).nullable(),
-    }),
+    
+      className: classNameProp,}),
     events: ["change"],
     description:
       "Toggle button. Use { $bindState } on pressed for state binding.",
@@ -440,7 +482,8 @@ export const shadcnComponentDefinitions = {
         z.object({
           label: z.string(),
           value: z.string(),
-        }),
+        
+      className: classNameProp,}),
       ),
       type: z.enum(["single", "multiple"]).nullable(),
       value: z.string().nullable(),
@@ -456,7 +499,8 @@ export const shadcnComponentDefinitions = {
         z.object({
           label: z.string(),
           value: z.string(),
-        }),
+        
+      className: classNameProp,}),
       ),
       selected: z.string().nullable(),
     }),
@@ -469,7 +513,8 @@ export const shadcnComponentDefinitions = {
     props: z.object({
       totalPages: z.number(),
       page: z.number().nullable(),
-    }),
+    
+      className: classNameProp,}),
     events: ["change"],
     description:
       "Page navigation. Use { $bindState } on page for current page number.",
diff --git a/packages/shadcn/src/components.tsx b/packages/shadcn/src/components.tsx
index 6f85f9bd..35d3893c 100644
--- a/packages/shadcn/src/components.tsx
+++ b/packages/shadcn/src/components.tsx
@@ -185,7 +185,7 @@ export const shadcnComponents = {
     const centeredClass = props.centered ? "mx-auto" : "";
 
     return (
-      <Card className={cn(maxWidthClass, centeredClass)}>
+      <Card className={cn(maxWidthClass, centeredClass, props.className)}>
         {(props.title || props.description) && (
           <CardHeader>
             {props.title && <CardTitle>{props.title}</CardTitle>}
@@ -194,7 +194,7 @@ export const shadcnComponents = {
             )}
           </CardHeader>
         )}
-        <CardContent className="flex flex-col gap-3">{children}</CardContent>
+        <CardContent className={cn("flex flex-col gap-3", props.className)}>{children}</CardContent>
       </Card>
     );
   },
@@ -316,13 +316,13 @@ export const shadcnComponents = {
 
     if (isMultiple) {
       return (
-        <AccordionPrimitive type="multiple" className="w-full">
+        <AccordionPrimitive type="multiple" className={cn("w-full", props.className)}>
           {itemElements}
         </AccordionPrimitive>
       );
     }
     return (
-      <AccordionPrimitive type="single" collapsible className="w-full">
+      <AccordionPrimitive type="single" collapsible className={cn("w-full", props.className)}>
         {itemElements}
       </AccordionPrimitive>
     );
@@ -334,9 +334,9 @@ export const shadcnComponents = {
   }: BaseComponentProps<ShadcnProps<"Collapsible">>) => {
     const [open, setOpen] = useState(props.defaultOpen ?? false);
     return (
-      <Collapsible open={open} onOpenChange={setOpen} className="w-full">
+      <Collapsible open={open} onOpenChange={setOpen} className={cn("w-full", props.className)}>
         <CollapsibleTrigger asChild>
-          <button className="flex w-full items-center justify-between rounded-md border border-border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors">
+          <button className={cn("flex w-full items-center justify-between rounded-md border border-border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors", props.className)}>
             {props.title}
             <svg
               className={`h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`}
@@ -353,7 +353,7 @@ export const shadcnComponents = {
             </svg>
           </button>
         </CollapsibleTrigger>
-        <CollapsibleContent className="pt-2">{children}</CollapsibleContent>
+        <CollapsibleContent className={cn("pt-2", props.className)}>{children}</CollapsibleContent>
       </Collapsible>
     );
   },
@@ -386,7 +386,7 @@ export const shadcnComponents = {
               <DrawerDescription>{props.description}</DrawerDescription>
             )}
           </DrawerHeader>
-          <div className="p-4">{children}</div>
+          <div className={cn("p-4", props.className)}>{children}</div>
         </DrawerContent>
       </DrawerPrimitive>
     );
@@ -395,19 +395,18 @@ export const shadcnComponents = {
   Carousel: ({ props }: BaseComponentProps<ShadcnProps<"Carousel">>) => {
     const items = props.items ?? [];
     return (
-      <CarouselPrimitive className="w-full">
+      <CarouselPrimitive className={cn("w-full", props.className)}>
         <CarouselContent>
           {items.map((item, i) => (
-            <CarouselItem
-              key={i}
-              className="basis-3/4 md:basis-1/2 lg:basis-1/3"
+            <CarouselItem key={i}
+              className={cn("basis-3/4 md:basis-1/2 lg:basis-1/3", props.className)}
             >
-              <div className="border border-border rounded-lg p-4 bg-card h-full">
+              <div className={cn("border border-border rounded-lg p-4 bg-card h-full", props.className)}>
                 {item.title && (
-                  <h4 className="font-semibold text-sm mb-1">{item.title}</h4>
+                  <h4 className={cn("font-semibold text-sm mb-1", props.className)}>{item.title}</h4>
                 )}
                 {item.description && (
-                  <p className="text-sm text-muted-foreground">
+                  <p className={cn("text-sm text-muted-foreground", props.className)}>
                     {item.description}
                   </p>
                 )}
@@ -428,7 +427,7 @@ export const shadcnComponents = {
     const rows = (props.rows ?? []).map((row) => row.map(String));
 
     return (
-      <div className="rounded-md border border-border overflow-hidden">
+      <div className={cn("rounded-md border border-border overflow-hidden", props.className)}>
         <TablePrimitive>
           {props.caption && <TableCaption>{props.caption}</TableCaption>}
           <TableHeader>
@@ -493,18 +492,16 @@ export const shadcnComponents = {
   Image: ({ props }: BaseComponentProps<ShadcnProps<"Image">>) => {
     if (props.src) {
       return (
-        <img
-          src={props.src}
+        <img src={props.src}
           alt={props.alt ?? ""}
           width={props.width ?? undefined}
           height={props.height ?? undefined}
-          className="rounded max-w-full"
+          className={cn("rounded max-w-full", props.className)}
         />
       );
     }
     return (
-      <div
-        className="bg-muted border border-border rounded flex items-center justify-center text-xs text-muted-foreground"
+      <div className={cn("bg-muted border border-border rounded flex items-center justify-center text-xs text-muted-foreground", props.className)}
         style={{ width: props.width ?? 80, height: props.height ?? 60 }}
       >
         {props.alt || "img"}
@@ -561,9 +558,9 @@ export const shadcnComponents = {
   Progress: ({ props }: BaseComponentProps<ShadcnProps<"Progress">>) => {
     const value = Math.min(100, Math.max(0, props.value || 0));
     return (
-      <div className="space-y-2">
+      <div className={cn("space-y-2", props.className)}>
         {props.label && (
-          <Label className="text-sm text-muted-foreground">{props.label}</Label>
+          <Label className={cn("text-sm text-muted-foreground", props.className)}>{props.label}</Label>
         )}
         <Progress value={value} />
       </div>
@@ -590,28 +587,26 @@ export const shadcnComponents = {
           ? "h-4 w-4"
           : "h-6 w-6";
     return (
-      <div className="flex items-center gap-2">
+      <div className={cn("flex items-center gap-2", props.className)}>
         <svg
           className={`${sizeClass} animate-spin text-muted-foreground`}
           viewBox="0 0 24 24"
           fill="none"
         >
-          <circle
-            className="opacity-25"
+          <circle className={cn("opacity-25", props.className)}
             cx="12"
             cy="12"
             r="10"
             stroke="currentColor"
             strokeWidth="4"
           />
-          <path
-            className="opacity-75"
+          <path className={cn("opacity-75", props.className)}
             fill="currentColor"
             d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
           />
         </svg>
         {props.label && (
-          <span className="text-sm text-muted-foreground">{props.label}</span>
+          <span className={cn("text-sm text-muted-foreground", props.className)}>{props.label}</span>
         )}
       </div>
     );
@@ -622,7 +617,7 @@ export const shadcnComponents = {
       <TooltipProvider>
         <TooltipPrimitive>
           <TooltipTrigger asChild>
-            <span className="text-sm underline decoration-dotted cursor-help">
+            <span className={cn("text-sm underline decoration-dotted cursor-help", props.className)}>
               {props.text}
             </span>
           </TooltipTrigger>
@@ -638,12 +633,12 @@ export const shadcnComponents = {
     return (
       <PopoverPrimitive>
         <PopoverTrigger asChild>
-          <Button variant="outline" className="text-sm">
+          <Button variant="outline" className={cn("text-sm", props.className)}>
             {props.trigger}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-64">
-          <p className="text-sm">{props.content}</p>
+        <PopoverContent className={cn("w-64", props.className)}>
+          <p className={cn("text-sm", props.className)}>{props.content}</p>
         </PopoverContent>
       </PopoverPrimitive>
     );
@@ -673,7 +668,7 @@ export const shadcnComponents = {
     );
 
     return (
-      <div className="space-y-2">
+      <div className={cn("space-y-2", props.className)}>
         {props.label && (
           <Label htmlFor={props.name ?? undefined}>{props.label}</Label>
         )}
@@ -697,7 +692,7 @@ export const shadcnComponents = {
           }}
         />
         {errors.length > 0 && (
-          <p className="text-sm text-destructive">{errors[0]}</p>
+          <p className={cn("text-sm text-destructive", props.className)}>{errors[0]}</p>
         )}
       </div>
     );
@@ -724,7 +719,7 @@ export const shadcnComponents = {
     );
 
     return (
-      <div className="space-y-2">
+      <div className={cn("space-y-2", props.className)}>
         {props.label && (
           <Label htmlFor={props.name ?? undefined}>{props.label}</Label>
         )}
@@ -743,7 +738,7 @@ export const shadcnComponents = {
           }}
         />
         {errors.length > 0 && (
-          <p className="text-sm text-destructive">{errors[0]}</p>
+          <p className={cn("text-sm text-destructive", props.className)}>{errors[0]}</p>
         )}
       </div>
     );
@@ -775,7 +770,7 @@ export const shadcnComponents = {
     );
 
     return (
-      <div className="space-y-2">
+      <div className={cn("space-y-2", props.className)}>
         <Label>{props.label}</Label>
         <Select
           value={value}
@@ -786,7 +781,7 @@ export const shadcnComponents = {
             emit("change");
           }}
         >
-          <SelectTrigger className="w-full">
+          <SelectTrigger className={cn("w-full", props.className)}>
             <SelectValue placeholder={props.placeholder ?? "Select..."} />
           </SelectTrigger>
           <SelectContent>
@@ -798,7 +793,7 @@ export const shadcnComponents = {
           </SelectContent>
         </Select>
         {errors.length > 0 && (
-          <p className="text-sm text-destructive">{errors[0]}</p>
+          <p className={cn("text-sm text-destructive", props.className)}>{errors[0]}</p>
         )}
       </div>
     );
@@ -826,8 +821,8 @@ export const shadcnComponents = {
     );
 
     return (
-      <div className="space-y-1">
-        <div className="flex items-center space-x-2">
+      <div className={cn("space-y-1", props.className)}>
+        <div className={cn("flex items-center space-x-2", props.className)}>
           <Checkbox
             id={props.name ?? undefined}
             checked={checked}
@@ -837,12 +832,12 @@ export const shadcnComponents = {
               emit("change");
             }}
           />
-          <Label htmlFor={props.name ?? undefined} className="cursor-pointer">
+          <Label htmlFor={props.name ?? undefined} className={cn("cursor-pointer", props.className)}>
             {props.label}
           </Label>
         </div>
         {errors.length > 0 && (
-          <p className="text-sm text-destructive">{errors[0]}</p>
+          <p className={cn("text-sm text-destructive", props.className)}>{errors[0]}</p>
         )}
       </div>
     );
@@ -874,7 +869,7 @@ export const shadcnComponents = {
     );
 
     return (
-      <div className="space-y-2">
+      <div className={cn("space-y-2", props.className)}>
         {props.label && <Label>{props.label}</Label>}
         <RadioGroup
           value={value}
@@ -885,14 +880,13 @@ export const shadcnComponents = {
           }}
         >
           {options.map((opt, idx) => (
-            <div key={`${idx}-${opt}`} className="flex items-center space-x-2">
+            <div key={`${idx}-${opt}`} className={cn("flex items-center space-x-2", props.className)}>
               <RadioGroupItem
                 value={opt || `option-${idx}`}
                 id={`${props.name}-${idx}-${opt}`}
               />
-              <Label
-                htmlFor={`${props.name}-${idx}-${opt}`}
-                className="cursor-pointer"
+              <Label htmlFor={`${props.name}-${idx}-${opt}`}
+                className={cn("cursor-pointer", props.className)}
               >
                 {opt}
               </Label>
@@ -900,7 +894,7 @@ export const shadcnComponents = {
           ))}
         </RadioGroup>
         {errors.length > 0 && (
-          <p className="text-sm text-destructive">{errors[0]}</p>
+          <p className={cn("text-sm text-destructive", props.className)}>{errors[0]}</p>
         )}
       </div>
     );
@@ -928,9 +922,9 @@ export const shadcnComponents = {
     );
 
     return (
-      <div className="space-y-1">
-        <div className="flex items-center justify-between space-x-2">
-          <Label htmlFor={props.name ?? undefined} className="cursor-pointer">
+      <div className={cn("space-y-1", props.className)}>
+        <div className={cn("flex items-center justify-between space-x-2", props.className)}>
+          <Label htmlFor={props.name ?? undefined} className={cn("cursor-pointer", props.className)}>
             {props.label}
           </Label>
           <Switch
@@ -944,7 +938,7 @@ export const shadcnComponents = {
           />
         </div>
         {errors.length > 0 && (
-          <p className="text-sm text-destructive">{errors[0]}</p>
+          <p className={cn("text-sm text-destructive", props.className)}>{errors[0]}</p>
         )}
       </div>
     );
@@ -965,11 +959,11 @@ export const shadcnComponents = {
     const setValue = isBound ? setBoundValue : setLocalValue;
 
     return (
-      <div className="space-y-2">
+      <div className={cn("space-y-2", props.className)}>
         {props.label && (
-          <div className="flex justify-between">
-            <Label className="text-sm">{props.label}</Label>
-            <span className="text-sm text-muted-foreground">{value}</span>
+          <div className={cn("flex justify-between", props.className)}>
+            <Label className={cn("text-sm", props.className)}>{props.label}</Label>
+            <span className={cn("text-sm text-muted-foreground", props.className)}>{value}</span>
           </div>
         )}
         <Slider
@@ -1009,9 +1003,8 @@ export const shadcnComponents = {
 
   Link: ({ props, on }: BaseComponentProps<ShadcnProps<"Link">>) => {
     return (
-      <a
-        href={props.href ?? "#"}
-        className="text-primary underline-offset-4 hover:underline text-sm font-medium"
+      <a href={props.href ?? "#"}
+        className={cn("text-primary underline-offset-4 hover:underline text-sm font-medium", props.className)}
         onClick={(e) => {
           const press = on("press");
           if (press.shouldPreventDefault) e.preventDefault();
@@ -1155,7 +1148,7 @@ export const shadcnComponents = {
     const setValue = isBound ? setBoundSelected : setLocalValue;
 
     return (
-      <div className="inline-flex rounded-md border border-border">
+      <div className={cn("inline-flex rounded-md border border-border", props.className)}>
         {buttons.map((btn, i) => (
           <button
             key={btn.value}