diff --git a/apps/v4/registry/bases/base/blocks/preview.tsx b/apps/v4/registry/bases/base/blocks/preview.tsx
index d37bfc4443..6f5905cc08 100644
--- a/apps/v4/registry/bases/base/blocks/preview.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview.tsx
@@ -1168,7 +1168,7 @@ function SmallFormExample() {
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 align="end"
-                className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48"
+                className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-rhea:w-48 style-vega:w-56 style-lyra:w-48"
               >
                 <DropdownMenuGroup>
                   <DropdownMenuLabel>File</DropdownMenuLabel>
diff --git a/apps/v4/registry/bases/base/examples/accordion-example.tsx b/apps/v4/registry/bases/base/examples/accordion-example.tsx
index 8ed79cabfd..5bb11ea4eb 100644
--- a/apps/v4/registry/bases/base/examples/accordion-example.tsx
+++ b/apps/v4/registry/bases/base/examples/accordion-example.tsx
@@ -132,17 +132,17 @@ function AccordionWithBorders() {
 
   return (
     <Example title="With Borders">
-      <Accordion className="style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg">
+      <Accordion className="style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 style-rhea:gap-2 mx-auto max-w-lg">
         {items.map((item) => (
           <AccordionItem
             key={item.value}
             value={item.value}
-            className="style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg"
+            className="style-vega:border style-nova:border style-rhea:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg style-rhea:rounded-lg"
           >
-            <AccordionTrigger className="style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium">
+            <AccordionTrigger className="style-nova:px-2.5 style-rhea:px-2.5 style-nova:text-sm style-rhea:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium">
               {item.trigger}
             </AccordionTrigger>
-            <AccordionContent className="text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0">
+            <AccordionContent className="text-muted-foreground style-nova:px-2.5 style-rhea:px-2.5 style-nova:text-sm style-rhea:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0">
               {item.content}
             </AccordionContent>
           </AccordionItem>
@@ -314,7 +314,7 @@ function AccordionWithDisabled() {
 
   return (
     <Example title="With Disabled">
-      <Accordion className="style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border">
+      <Accordion className="style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-rhea:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border">
         {items.map((item) => (
           <AccordionItem
             key={item.value}
@@ -322,10 +322,10 @@ function AccordionWithDisabled() {
             disabled={item.disabled}
             className="data-open:bg-muted/50 p-1"
           >
-            <AccordionTrigger className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
+            <AccordionTrigger className="style-nova:px-2.5 style-rhea:px-2.5 style-lyra:px-2 style-vega:px-4">
               {item.trigger}
             </AccordionTrigger>
-            <AccordionContent className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
+            <AccordionContent className="style-nova:px-2.5 style-rhea:px-2.5 style-lyra:px-2 style-vega:px-4">
               {item.content}
             </AccordionContent>
           </AccordionItem>
diff --git a/apps/v4/registry/bases/base/examples/dialog-example.tsx b/apps/v4/registry/bases/base/examples/dialog-example.tsx
index f754396a6c..9016fd0ec4 100644
--- a/apps/v4/registry/bases/base/examples/dialog-example.tsx
+++ b/apps/v4/registry/bases/base/examples/dialog-example.tsx
@@ -133,7 +133,7 @@ function DialogScrollableContent() {
               This is a dialog with scrollable content.
             </DialogDescription>
           </DialogHeader>
-          <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+          <div className="style-nova:-mx-4 style-rhea:-mx-4 style-nova:px-4 style-rhea:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
             {Array.from({ length: 10 }).map((_, index) => (
               <p
                 key={index}
@@ -169,7 +169,7 @@ function DialogWithStickyFooter() {
               This is a dialog with scrollable content.
             </DialogDescription>
           </DialogHeader>
-          <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+          <div className="style-nova:-mx-4 style-rhea:-mx-4 style-nova:px-4 style-rhea:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
             {Array.from({ length: 10 }).map((_, index) => (
               <p
                 key={index}
@@ -314,7 +314,7 @@ function DialogChatSettings() {
                 </TabsTrigger>
                 <TabsTrigger value="security">Security</TabsTrigger>
               </TabsList>
-              <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]">
+              <div className="style-nova:p-4 style-rhea:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-rhea:min-h-[460px] style-nova:rounded-lg style-rhea:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]">
                 <TabsContent value="general">
                   <FieldSet>
                     <FieldGroup>
diff --git a/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx b/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx
index 0ec414a235..ab9f07acfe 100644
--- a/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx
+++ b/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx
@@ -845,7 +845,7 @@ function DropdownMenuComplex() {
         >
           Complex Menu
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48">
+        <DropdownMenuContent className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-rhea:w-48 style-vega:w-56 style-lyra:w-48">
           <DropdownMenuGroup>
             <DropdownMenuLabel>File</DropdownMenuLabel>
             <DropdownMenuItem>
diff --git a/apps/v4/registry/bases/base/examples/hover-card-example.tsx b/apps/v4/registry/bases/base/examples/hover-card-example.tsx
index 2c72395f35..9944cc42ed 100644
--- a/apps/v4/registry/bases/base/examples/hover-card-example.tsx
+++ b/apps/v4/registry/bases/base/examples/hover-card-example.tsx
@@ -49,7 +49,7 @@ function HoverCardSides() {
               {side.replace("-", " ")}
             </HoverCardTrigger>
             <HoverCardContent side={side}>
-              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
+              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-rhea:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
                 <h4 className="font-medium">Hover Card</h4>
                 <p>
                   This hover card appears on the {side.replace("-", " ")} side
@@ -87,7 +87,7 @@ function HoverCardInDialog() {
               Hover me
             </HoverCardTrigger>
             <HoverCardContent>
-              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
+              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-rhea:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
                 <h4 className="font-medium">Hover Card</h4>
                 <p>
                   This hover card appears inside a dialog. Hover over the button
diff --git a/apps/v4/registry/bases/base/examples/input-otp-example.tsx b/apps/v4/registry/bases/base/examples/input-otp-example.tsx
index d34b4806d2..31bb87a77b 100644
--- a/apps/v4/registry/bases/base/examples/input-otp-example.tsx
+++ b/apps/v4/registry/bases/base/examples/input-otp-example.tsx
@@ -254,13 +254,13 @@ function InputOTPForm() {
                 </Button>
               </div>
               <InputOTP maxLength={6} id="otp-verification" required>
-                <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+                <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-rhea:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-rhea:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
                   <InputOTPSlot index={0} />
                   <InputOTPSlot index={1} />
                   <InputOTPSlot index={2} />
                 </InputOTPGroup>
                 <InputOTPSeparator />
-                <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+                <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-rhea:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-rhea:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
                   <InputOTPSlot index={3} />
                   <InputOTPSlot index={4} />
                   <InputOTPSlot index={5} />
diff --git a/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx b/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx
index b784bebaf0..aebca53651 100644
--- a/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx
+++ b/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx
@@ -175,7 +175,7 @@ function ListItem({
   return (
     <li {...props}>
       <NavigationMenuLink render={<Link href={href} />}>
-        <div className="style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1">
+        <div className="style-vega:text-sm style-maia:text-sm style-nova:text-sm style-rhea:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1">
           <div className="leading-none font-medium">{title}</div>
           <div className="text-muted-foreground line-clamp-2">{children}</div>
         </div>
diff --git a/apps/v4/registry/bases/base/examples/sheet-example.tsx b/apps/v4/registry/bases/base/examples/sheet-example.tsx
index 2b83512a9f..08c1126a4c 100644
--- a/apps/v4/registry/bases/base/examples/sheet-example.tsx
+++ b/apps/v4/registry/bases/base/examples/sheet-example.tsx
@@ -39,7 +39,7 @@ function SheetWithForm() {
               done.
             </SheetDescription>
           </SheetHeader>
-          <div className="style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4">
+          <div className="style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 style-rhea:px-4">
             <FieldGroup>
               <Field>
                 <FieldLabel htmlFor="sheet-demo-name">Name</FieldLabel>
@@ -106,7 +106,7 @@ function SheetWithSides() {
                   done.
                 </SheetDescription>
               </SheetHeader>
-              <div className="no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto">
+              <div className="no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 style-rhea:px-4 overflow-y-auto">
                 {Array.from({ length: 10 }).map((_, index) => (
                   <p
                     key={index}
diff --git a/apps/v4/registry/bases/base/examples/tabs-example.tsx b/apps/v4/registry/bases/base/examples/tabs-example.tsx
index a539d26cdf..26416a4d1a 100644
--- a/apps/v4/registry/bases/base/examples/tabs-example.tsx
+++ b/apps/v4/registry/bases/base/examples/tabs-example.tsx
@@ -195,7 +195,7 @@ function TabsWithContent() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="style-nova:p-4 style-rhea:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-rhea:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -220,7 +220,7 @@ function TabsLineWithContent() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="style-nova:p-4 style-rhea:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-rhea:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -284,7 +284,7 @@ function TabsWithDropdown() {
           </DropdownMenu>
         </div>
 
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="style-nova:p-4 style-rhea:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-rhea:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
           <TabsContent value="overview">
             View your dashboard metrics and key performance indicators.
           </TabsContent>
@@ -309,7 +309,7 @@ function TabsVertical() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="style-nova:p-4 style-rhea:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-rhea:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -342,7 +342,7 @@ function TabsWithInputAndButton() {
             <Button>Action</Button>
           </div>
         </div>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="style-nova:p-4 style-rhea:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-rhea:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
           <TabsContent value="overview">
             View your dashboard metrics and key performance indicators.
           </TabsContent>
diff --git a/apps/v4/registry/bases/radix/blocks/preview.tsx b/apps/v4/registry/bases/radix/blocks/preview.tsx
index f75e344964..6e55f31a99 100644
--- a/apps/v4/registry/bases/radix/blocks/preview.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview.tsx
@@ -1125,7 +1125,7 @@ function SmallFormExample() {
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 align="end"
-                className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48"
+                className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-rhea:w-48 style-vega:w-56 style-lyra:w-48"
               >
                 <DropdownMenuGroup>
                   <DropdownMenuLabel>File</DropdownMenuLabel>
diff --git a/apps/v4/registry/bases/radix/examples/accordion-example.tsx b/apps/v4/registry/bases/radix/examples/accordion-example.tsx
index ed464ce7a1..c96d93fb96 100644
--- a/apps/v4/registry/bases/radix/examples/accordion-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/accordion-example.tsx
@@ -135,18 +135,18 @@ function AccordionWithBorders() {
       <Accordion
         type="single"
         collapsible
-        className="style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg"
+        className="style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 style-rhea:gap-2 mx-auto max-w-lg"
       >
         {items.map((item) => (
           <AccordionItem
             key={item.value}
             value={item.value}
-            className="style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg"
+            className="style-vega:border style-nova:border style-rhea:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg style-rhea:rounded-lg"
           >
-            <AccordionTrigger className="style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium">
+            <AccordionTrigger className="style-nova:px-2.5 style-rhea:px-2.5 style-nova:text-sm style-rhea:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium">
               {item.trigger}
             </AccordionTrigger>
-            <AccordionContent className="text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0">
+            <AccordionContent className="text-muted-foreground style-nova:px-2.5 style-rhea:px-2.5 style-nova:text-sm style-rhea:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0">
               {item.content}
             </AccordionContent>
           </AccordionItem>
@@ -322,7 +322,7 @@ function AccordionWithDisabled() {
       <Accordion
         type="single"
         collapsible
-        className="style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border"
+        className="style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-rhea:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border"
       >
         {items.map((item) => (
           <AccordionItem
@@ -331,10 +331,10 @@ function AccordionWithDisabled() {
             disabled={item.disabled}
             className="data-open:bg-muted/50 p-1"
           >
-            <AccordionTrigger className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
+            <AccordionTrigger className="style-nova:px-2.5 style-rhea:px-2.5 style-lyra:px-2 style-vega:px-4">
               {item.trigger}
             </AccordionTrigger>
-            <AccordionContent className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
+            <AccordionContent className="style-nova:px-2.5 style-rhea:px-2.5 style-lyra:px-2 style-vega:px-4">
               {item.content}
             </AccordionContent>
           </AccordionItem>
diff --git a/apps/v4/registry/bases/radix/examples/card-example.tsx b/apps/v4/registry/bases/radix/examples/card-example.tsx
index 178288336f..e6309c44fd 100644
--- a/apps/v4/registry/bases/radix/examples/card-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/card-example.tsx
@@ -86,7 +86,7 @@ function CardLogin() {
           <Button variant="outline" className="w-full">
             Login with Google
           </Button>
-          <div className="style-nova:mt-2 mt-4 text-center">
+          <div className="style-nova:mt-2 style-rhea:mt-2 mt-4 text-center">
             Don&apos;t have an account?{" "}
             <a href="#" className="underline underline-offset-4">
               Sign up
diff --git a/apps/v4/registry/bases/radix/examples/dialog-example.tsx b/apps/v4/registry/bases/radix/examples/dialog-example.tsx
index 04c6fdd152..6a89aa5c6b 100644
--- a/apps/v4/registry/bases/radix/examples/dialog-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/dialog-example.tsx
@@ -133,7 +133,7 @@ function DialogScrollableContent() {
               This is a dialog with scrollable content.
             </DialogDescription>
           </DialogHeader>
-          <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+          <div className="style-nova:-mx-4 style-rhea:-mx-4 style-nova:px-4 style-rhea:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
             {Array.from({ length: 10 }).map((_, index) => (
               <p
                 key={index}
@@ -169,7 +169,7 @@ function DialogWithStickyFooter() {
               This is a dialog with scrollable content.
             </DialogDescription>
           </DialogHeader>
-          <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+          <div className="style-nova:-mx-4 style-rhea:-mx-4 style-nova:px-4 style-rhea:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
             {Array.from({ length: 10 }).map((_, index) => (
               <p
                 key={index}
@@ -298,7 +298,7 @@ function DialogChatSettings() {
                 </TabsTrigger>
                 <TabsTrigger value="security">Security</TabsTrigger>
               </TabsList>
-              <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]">
+              <div className="style-nova:p-4 style-rhea:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-rhea:min-h-[460px] style-nova:rounded-lg style-rhea:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]">
                 <TabsContent value="general">
                   <FieldSet>
                     <FieldGroup>
diff --git a/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx b/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx
index 314d8ba643..816291144c 100644
--- a/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx
@@ -830,7 +830,7 @@ function DropdownMenuComplex() {
             Complex Menu
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48">
+        <DropdownMenuContent className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-rhea:w-48 style-vega:w-56 style-lyra:w-48">
           <DropdownMenuGroup>
             <DropdownMenuLabel>File</DropdownMenuLabel>
             <DropdownMenuItem>
diff --git a/apps/v4/registry/bases/radix/examples/hover-card-example.tsx b/apps/v4/registry/bases/radix/examples/hover-card-example.tsx
index e95664d242..fb4348a0fd 100644
--- a/apps/v4/registry/bases/radix/examples/hover-card-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/hover-card-example.tsx
@@ -40,7 +40,7 @@ function HoverCardSides() {
               </Button>
             </HoverCardTrigger>
             <HoverCardContent side={side} className="w-64">
-              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
+              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-rhea:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
                 <h4 className="font-medium">Hover Card</h4>
                 <p>
                   This hover card appears on the {side} side of the trigger.
@@ -75,7 +75,7 @@ function HoverCardInDialog() {
               </Button>
             </HoverCardTrigger>
             <HoverCardContent className="w-64">
-              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
+              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-rhea:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
                 <h4 className="font-medium">Hover Card</h4>
                 <p>
                   This hover card appears inside a dialog. Hover over the button
diff --git a/apps/v4/registry/bases/radix/examples/input-otp-example.tsx b/apps/v4/registry/bases/radix/examples/input-otp-example.tsx
index e1d3a86ef9..1c5f6a3643 100644
--- a/apps/v4/registry/bases/radix/examples/input-otp-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/input-otp-example.tsx
@@ -254,13 +254,13 @@ function InputOTPForm() {
                 </Button>
               </div>
               <InputOTP maxLength={6} id="otp-verification" required>
-                <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+                <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-rhea:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-rhea:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
                   <InputOTPSlot index={0} />
                   <InputOTPSlot index={1} />
                   <InputOTPSlot index={2} />
                 </InputOTPGroup>
                 <InputOTPSeparator />
-                <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+                <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-rhea:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-rhea:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
                   <InputOTPSlot index={3} />
                   <InputOTPSlot index={4} />
                   <InputOTPSlot index={5} />
diff --git a/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx b/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx
index e8647aab35..7e640f9849 100644
--- a/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx
@@ -247,7 +247,7 @@ function ListItem({
     <li {...props}>
       <NavigationMenuLink asChild>
         <Link href={href}>
-          <div className="style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1">
+          <div className="style-vega:text-sm style-maia:text-sm style-nova:text-sm style-rhea:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1">
             <div className="leading-none font-medium">{title}</div>
             <div className="text-muted-foreground line-clamp-2">{children}</div>
           </div>
diff --git a/apps/v4/registry/bases/radix/examples/sheet-example.tsx b/apps/v4/registry/bases/radix/examples/sheet-example.tsx
index 5c8b7b9b9d..06756a174d 100644
--- a/apps/v4/registry/bases/radix/examples/sheet-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/sheet-example.tsx
@@ -41,7 +41,7 @@ function SheetWithForm() {
               done.
             </SheetDescription>
           </SheetHeader>
-          <div className="style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4">
+          <div className="style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 style-rhea:px-4">
             <FieldGroup>
               <Field>
                 <FieldLabel htmlFor="sheet-demo-name">Name</FieldLabel>
@@ -110,7 +110,7 @@ function SheetWithSides() {
                   done.
                 </SheetDescription>
               </SheetHeader>
-              <div className="no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto">
+              <div className="no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 style-rhea:px-4 overflow-y-auto">
                 {Array.from({ length: 10 }).map((_, index) => (
                   <p
                     key={index}
diff --git a/apps/v4/registry/bases/radix/examples/tabs-example.tsx b/apps/v4/registry/bases/radix/examples/tabs-example.tsx
index 4b6adb7e2c..ddb1d20880 100644
--- a/apps/v4/registry/bases/radix/examples/tabs-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/tabs-example.tsx
@@ -195,7 +195,7 @@ function TabsWithContent() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="style-nova:p-4 style-rhea:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-rhea:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -220,7 +220,7 @@ function TabsLineWithContent() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="style-nova:p-4 style-rhea:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-rhea:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -284,7 +284,7 @@ function TabsWithDropdown() {
           </DropdownMenu>
         </div>
 
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="style-nova:p-4 style-rhea:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-rhea:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
           <TabsContent value="overview">
             View your dashboard metrics and key performance indicators.
           </TabsContent>
@@ -309,7 +309,7 @@ function TabsVertical() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="style-nova:p-4 style-rhea:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-rhea:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -342,7 +342,7 @@ function TabsWithInputAndButton() {
             <Button>Action</Button>
           </div>
         </div>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="style-nova:p-4 style-rhea:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-rhea:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
           <TabsContent value="overview">
             View your dashboard metrics and key performance indicators.
           </TabsContent>