diff --git a/examples/auth/src/app/(app)/_components/Gutter/index.tsx b/examples/auth/src/app/(app)/_components/Gutter/index.tsx
index 3845a1a62f..8303e35cb9 100644
--- a/examples/auth/src/app/(app)/_components/Gutter/index.tsx
+++ b/examples/auth/src/app/(app)/_components/Gutter/index.tsx
@@ -1,6 +1,4 @@
-import type { Ref } from 'react'
-
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import classes from './index.module.scss'
 
@@ -8,12 +6,12 @@ type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { children, className, left = true, right = true } = props
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
+  const { children, className, left = true, right = true, ref } = props
 
   return (
     <div
@@ -30,6 +28,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
-
-Gutter.displayName = 'Gutter'
+}
diff --git a/examples/draft-preview/src/components/Gutter/index.tsx b/examples/draft-preview/src/components/Gutter/index.tsx
index 3845a1a62f..8303e35cb9 100644
--- a/examples/draft-preview/src/components/Gutter/index.tsx
+++ b/examples/draft-preview/src/components/Gutter/index.tsx
@@ -1,6 +1,4 @@
-import type { Ref } from 'react'
-
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import classes from './index.module.scss'
 
@@ -8,12 +6,12 @@ type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { children, className, left = true, right = true } = props
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
+  const { children, className, left = true, right = true, ref } = props
 
   return (
     <div
@@ -30,6 +28,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
-
-Gutter.displayName = 'Gutter'
+}
diff --git a/examples/form-builder/src/components/Gutter/index.tsx b/examples/form-builder/src/components/Gutter/index.tsx
index fa7da778e8..1156d8c434 100644
--- a/examples/form-builder/src/components/Gutter/index.tsx
+++ b/examples/form-builder/src/components/Gutter/index.tsx
@@ -1,6 +1,4 @@
-import type { Ref } from 'react'
-
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import classes from './index.module.scss'
 
@@ -8,12 +6,12 @@ type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { children, className, left = true, right = true } = props
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
+  const { children, className, left = true, right = true, ref } = props
 
   return (
     <div
@@ -25,6 +23,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
-
-Gutter.displayName = 'Gutter'
+}
diff --git a/examples/live-preview/src/app/(app)/_components/Gutter/index.tsx b/examples/live-preview/src/app/(app)/_components/Gutter/index.tsx
index 3845a1a62f..8303e35cb9 100644
--- a/examples/live-preview/src/app/(app)/_components/Gutter/index.tsx
+++ b/examples/live-preview/src/app/(app)/_components/Gutter/index.tsx
@@ -1,6 +1,4 @@
-import type { Ref } from 'react'
-
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import classes from './index.module.scss'
 
@@ -8,12 +6,12 @@ type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { children, className, left = true, right = true } = props
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
+  const { children, className, left = true, right = true, ref } = props
 
   return (
     <div
@@ -30,6 +28,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
-
-Gutter.displayName = 'Gutter'
+}
diff --git a/examples/localization/src/components/ui/button.tsx b/examples/localization/src/components/ui/button.tsx
index 5b7a65282e..78ef80b8e2 100644
--- a/examples/localization/src/components/ui/button.tsx
+++ b/examples/localization/src/components/ui/button.tsx
@@ -34,16 +34,19 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
+  ref?: React.Ref<HTMLButtonElement>
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ asChild = false, className, size, variant, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} />
-    )
-  },
-)
-Button.displayName = 'Button'
+const Button: React.FC<ButtonProps> = ({
+  asChild = false,
+  className,
+  size,
+  variant,
+  ref,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : 'button'
+  return <Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} />
+}
 
 export { Button, buttonVariants }
diff --git a/examples/localization/src/components/ui/card.tsx b/examples/localization/src/components/ui/card.tsx
index 5d7b80ed67..5a7e35a51f 100644
--- a/examples/localization/src/components/ui/card.tsx
+++ b/examples/localization/src/components/ui/card.tsx
@@ -1,56 +1,48 @@
-/* eslint-disable jsx-a11y/heading-has-content */
 import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
-      ref={ref}
-      {...props}
-    />
-  ),
+const Card: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
+  <div
+    className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+    ref={ref}
+    {...props}
+  />
 )
-Card.displayName = 'Card'
 
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div className={cn('flex flex-col space-y-1.5 p-6', className)} ref={ref} {...props} />
-  ),
+const CardHeader: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
+  <div className={cn('flex flex-col space-y-1.5 p-6', className)} ref={ref} {...props} />
 )
-CardHeader.displayName = 'CardHeader'
 
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
-      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
-      ref={ref}
-      {...props}
-    />
-  ),
+const CardTitle: React.FC<
+  { ref?: React.Ref<HTMLHeadingElement> } & React.HTMLAttributes<HTMLHeadingElement>
+> = ({ className, ref, ...props }) => (
+  <h3
+    className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+    ref={ref}
+    {...props}
+  />
 )
-CardTitle.displayName = 'CardTitle'
 
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
+const CardDescription: React.FC<
+  { ref?: React.Ref<HTMLParagraphElement> } & React.HTMLAttributes<HTMLParagraphElement>
+> = ({ className, ref, ...props }) => (
   <p className={cn('text-sm text-muted-foreground', className)} ref={ref} {...props} />
-))
-CardDescription.displayName = 'CardDescription'
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div className={cn('p-6 pt-0', className)} ref={ref} {...props} />
-  ),
 )
-CardContent.displayName = 'CardContent'
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div className={cn('flex items-center p-6 pt-0', className)} ref={ref} {...props} />
-  ),
+const CardContent: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
+  <div className={cn('p-6 pt-0', className)} ref={ref} {...props} />
+)
+
+const CardFooter: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
+  <div className={cn('flex items-center p-6 pt-0', className)} ref={ref} {...props} />
 )
-CardFooter.displayName = 'CardFooter'
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
diff --git a/examples/localization/src/components/ui/checkbox.tsx b/examples/localization/src/components/ui/checkbox.tsx
index fe23eed55e..db07cad266 100644
--- a/examples/localization/src/components/ui/checkbox.tsx
+++ b/examples/localization/src/components/ui/checkbox.tsx
@@ -5,10 +5,11 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { Check } from 'lucide-react'
 import * as React from 'react'
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+const Checkbox: React.FC<
+  {
+    ref?: React.Ref<HTMLButtonElement>
+  } & React.ComponentProps<typeof CheckboxPrimitive.Root>
+> = ({ className, ref, ...props }) => (
   <CheckboxPrimitive.Root
     className={cn(
       'peer h-4 w-4 shrink-0 rounded border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
@@ -21,7 +22,6 @@ const Checkbox = React.forwardRef<
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+)
 
 export { Checkbox }
diff --git a/examples/localization/src/components/ui/input.tsx b/examples/localization/src/components/ui/input.tsx
index eb103a810b..b82e875724 100644
--- a/examples/localization/src/components/ui/input.tsx
+++ b/examples/localization/src/components/ui/input.tsx
@@ -1,23 +1,22 @@
 import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ type, className, ...props }, ref) => {
-    return (
-      <input
-        className={cn(
-          'flex h-10 w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        ref={ref}
-        type={type}
-        {...props}
-      />
-    )
-  },
-)
-Input.displayName = 'Input'
+const Input: React.FC<
+  {
+    ref?: React.Ref<HTMLInputElement>
+  } & React.InputHTMLAttributes<HTMLInputElement>
+> = ({ type, className, ref, ...props }) => {
+  return (
+    <input
+      className={cn(
+        'flex h-10 w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      type={type}
+      {...props}
+    />
+  )
+}
 
 export { Input }
diff --git a/examples/localization/src/components/ui/label.tsx b/examples/localization/src/components/ui/label.tsx
index da8a964c4e..0df4cf607b 100644
--- a/examples/localization/src/components/ui/label.tsx
+++ b/examples/localization/src/components/ui/label.tsx
@@ -9,12 +9,11 @@ const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 )
 
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
+const Label: React.FC<
+  { ref?: React.Ref<HTMLLabelElement> } & React.ComponentProps<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+> = ({ className, ref, ...props }) => (
   <LabelPrimitive.Root className={cn(labelVariants(), className)} ref={ref} {...props} />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+)
 
 export { Label }
diff --git a/examples/localization/src/components/ui/pagination.tsx b/examples/localization/src/components/ui/pagination.tsx
index d2e01e28f6..86b56931a6 100644
--- a/examples/localization/src/components/ui/pagination.tsx
+++ b/examples/localization/src/components/ui/pagination.tsx
@@ -1,11 +1,9 @@
-/* eslint-disable react/button-has-type */
 import type { ButtonProps } from '@/components/ui/button'
 
 import { buttonVariants } from '@/components/ui/button'
 import { cn } from 'src/utilities/cn'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 import * as React from 'react'
-import { useTranslations } from 'next-intl'
 
 const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav
@@ -15,19 +13,16 @@ const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
     {...props}
   />
 )
-Pagination.displayName = 'Pagination'
 
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
-  ({ className, ...props }, ref) => (
-    <ul className={cn('flex flex-row items-center gap-1', className)} ref={ref} {...props} />
-  ),
+const PaginationContent: React.FC<
+  { ref?: React.Ref<HTMLUListElement> } & React.HTMLAttributes<HTMLUListElement>
+> = ({ className, ref, ...props }) => (
+  <ul className={cn('flex flex-row items-center gap-1', className)} ref={ref} {...props} />
 )
-PaginationContent.displayName = 'PaginationContent'
 
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
-  ({ className, ...props }, ref) => <li className={cn('', className)} ref={ref} {...props} />,
-)
-PaginationItem.displayName = 'PaginationItem'
+const PaginationItem: React.FC<
+  { ref?: React.Ref<HTMLLIElement> } & React.HTMLAttributes<HTMLLIElement>
+> = ({ className, ref, ...props }) => <li className={cn('', className)} ref={ref} {...props} />
 
 type PaginationLinkProps = {
   isActive?: boolean
@@ -47,61 +42,44 @@ const PaginationLink = ({ className, isActive, size = 'icon', ...props }: Pagina
     {...props}
   />
 )
-PaginationLink.displayName = 'PaginationLink'
 
 const PaginationPrevious = ({
   className,
   ...props
-}: React.ComponentProps<typeof PaginationLink>) => {
-  const t = useTranslations()
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    className={cn('gap-1 pl-2.5', className)}
+    size="default"
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
 
-  return (
-    <PaginationLink
-      aria-label="Go to previous page"
-      className={cn('gap-1 pl-2.5', className)}
-      size="default"
-      {...props}
-    >
-      <ChevronLeft className="h-4 w-4" />
-      <span>{t('previous')}</span>
-    </PaginationLink>
-  )
-}
-PaginationPrevious.displayName = 'PaginationPrevious'
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    className={cn('gap-1 pr-2.5', className)}
+    size="default"
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
 
-const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => {
-  const t = useTranslations()
-
-  return (
-    <PaginationLink
-      aria-label="Go to next page"
-      className={cn('gap-1 pr-2.5', className)}
-      size="default"
-      {...props}
-    >
-      <span>{t('next')}</span>
-      <ChevronRight className="h-4 w-4" />
-    </PaginationLink>
-  )
-}
-PaginationNext.displayName = 'PaginationNext'
-
-const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => {
-  const t = useTranslations()
-
-  return (
-    <span
-      aria-hidden
-      className={cn('flex h-9 w-9 items-center justify-center', className)}
-      {...props}
-    >
-      <MoreHorizontal className="h-4 w-4" />
-      <span className="sr-only">{t('more-pages')}</span>
-    </span>
-  )
-}
-
-PaginationEllipsis.displayName = 'PaginationEllipsis'
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
 
 export {
   Pagination,
diff --git a/examples/localization/src/components/ui/select.tsx b/examples/localization/src/components/ui/select.tsx
index d9da66223f..85b2773ffd 100644
--- a/examples/localization/src/components/ui/select.tsx
+++ b/examples/localization/src/components/ui/select.tsx
@@ -11,10 +11,9 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValue = SelectPrimitive.Value
 
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ children, className, ...props }, ref) => (
+const SelectTrigger: React.FC<
+  { ref?: React.Ref<HTMLButtonElement> } & React.ComponentProps<typeof SelectPrimitive.Trigger>
+> = ({ children, className, ref, ...props }) => (
   <SelectPrimitive.Trigger
     className={cn(
       'flex h-10 w-full items-center justify-between rounded border border-input bg-background px-3 py-2 text-inherit ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
@@ -28,13 +27,11 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+)
 
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
+const SelectScrollUpButton: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.ScrollUpButton
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     ref={ref}
@@ -42,13 +39,13 @@ const SelectScrollUpButton = React.forwardRef<
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+)
 
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
+const SelectScrollDownButton: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<
+    typeof SelectPrimitive.ScrollDownButton
+  >
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.ScrollDownButton
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     ref={ref}
@@ -56,13 +53,13 @@ const SelectScrollDownButton = React.forwardRef<
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+)
 
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ children, className, position = 'popper', ...props }, ref) => (
+const SelectContent: React.FC<
+  {
+    ref?: React.Ref<HTMLDivElement>
+  } & React.ComponentProps<typeof SelectPrimitive.Content>
+> = ({ children, className, position = 'popper', ref, ...props }) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       className={cn(
@@ -88,25 +85,23 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+)
 
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
+const SelectLabel: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Label>
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.Label
     className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
     ref={ref}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+)
 
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ children, className, ...props }, ref) => (
+const SelectItem: React.FC<
+  { ref?: React.Ref<HTMLDivElement>; value: string } & React.ComponentProps<
+    typeof SelectPrimitive.Item
+  >
+> = ({ children, className, ref, ...props }) => (
   <SelectPrimitive.Item
     className={cn(
       'relative flex w-full cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
@@ -123,20 +118,17 @@ const SelectItem = React.forwardRef<
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+)
 
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const SelectSeparator: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Separator>
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.Separator
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
     ref={ref}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+)
 
 export {
   Select,
diff --git a/examples/localization/src/components/ui/textarea.tsx b/examples/localization/src/components/ui/textarea.tsx
index 3dd3492011..9158697c2d 100644
--- a/examples/localization/src/components/ui/textarea.tsx
+++ b/examples/localization/src/components/ui/textarea.tsx
@@ -1,22 +1,21 @@
 import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          'flex min-h-[80px] w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  },
-)
-Textarea.displayName = 'Textarea'
+const Textarea: React.FC<
+  {
+    ref?: React.Ref<HTMLTextAreaElement>
+  } & React.TextareaHTMLAttributes<HTMLTextAreaElement>
+> = ({ className, ref, ...props }) => {
+  return (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+}
 
 export { Textarea }
diff --git a/examples/tailwind-shadcn-ui/src/components/ui/alert.tsx b/examples/tailwind-shadcn-ui/src/components/ui/alert.tsx
index a01832a908..285db89e28 100644
--- a/examples/tailwind-shadcn-ui/src/components/ui/alert.tsx
+++ b/examples/tailwind-shadcn-ui/src/components/ui/alert.tsx
@@ -19,31 +19,29 @@ const alertVariants = cva(
   },
 )
 
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
+const Alert: React.FC<{ ref?: React.Ref<HTMLDivElement> } & VariantProps<typeof alertVariants>> = ({
+  className,
+  variant,
+  ref,
+  ...props
+}) => (
   <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-))
-Alert.displayName = 'Alert'
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h5
-      ref={ref}
-      className={cn('mb-1 font-medium leading-none tracking-tight', className)}
-      {...props}
-    />
-  ),
 )
-AlertTitle.displayName = 'AlertTitle'
 
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
+const AlertTitle: React.FC<
+  { ref?: React.Ref<HTMLHeadingElement> } & React.HTMLAttributes<HTMLHeadingElement>
+> = ({ className, ref, ...props }) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  />
+)
+
+const AlertDescription: React.FC<
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
   <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
-))
-AlertDescription.displayName = 'AlertDescription'
+)
 
 export { Alert, AlertTitle, AlertDescription }
diff --git a/packages/ui/src/elements/Gutter/index.tsx b/packages/ui/src/elements/Gutter/index.tsx
index 296400bb72..56f9a62734 100644
--- a/packages/ui/src/elements/Gutter/index.tsx
+++ b/packages/ui/src/elements/Gutter/index.tsx
@@ -46,5 +46,3 @@ export const Gutter: React.FC<GutterProps> = (props) => {
     </div>
   )
 }
-
-Gutter.displayName = 'Gutter'
diff --git a/test/live-preview/app/live-preview/_components/Gutter/index.tsx b/test/live-preview/app/live-preview/_components/Gutter/index.tsx
index 3845a1a62f..0370c74888 100644
--- a/test/live-preview/app/live-preview/_components/Gutter/index.tsx
+++ b/test/live-preview/app/live-preview/_components/Gutter/index.tsx
@@ -1,6 +1,4 @@
-import type { Ref } from 'react'
-
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import classes from './index.module.scss'
 
@@ -8,12 +6,12 @@ type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { children, className, left = true, right = true } = props
+export const Gutter: React.FC<{ ref?: React.Ref<HTMLDivElement> } & Props> = (props) => {
+  const { children, className, left = true, ref, right = true } = props
 
   return (
     <div
@@ -30,6 +28,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
-
-Gutter.displayName = 'Gutter'
+}
diff --git a/test/live-preview/prod/app/live-preview/_components/Gutter/index.tsx b/test/live-preview/prod/app/live-preview/_components/Gutter/index.tsx
index 3845a1a62f..8436e1c2f8 100644
--- a/test/live-preview/prod/app/live-preview/_components/Gutter/index.tsx
+++ b/test/live-preview/prod/app/live-preview/_components/Gutter/index.tsx
@@ -1,6 +1,6 @@
 import type { Ref } from 'react'
 
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import classes from './index.module.scss'
 
@@ -12,8 +12,8 @@ type Props = {
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { children, className, left = true, right = true } = props
+export const Gutter: React.FC<{ ref?: Ref<HTMLDivElement> } & Props> = (props) => {
+  const { children, className, left = true, ref, right = true } = props
 
   return (
     <div
@@ -30,6 +30,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
-
-Gutter.displayName = 'Gutter'
+}