React To Solid

React to SolidJS

Use this skill for the translation itself. Use .agents/skills/zaidan-agent/SKILL.md for the workflow, source URLs, target paths, registry updates, browser testing, and command choices.

Load References Only When Needed

• Read docs/base-ui-mapping.md for @base-ui/react-*, @radix-ui/*, Base UI data attributes, or Base UI CSS variables.
• Read docs/kobalte-patterns.md when typing or composing Kobalte primitive parts.
• Read docs/corvu-patterns.md when using Corvu primitives.
• Read docs/third-party-deps.md when replacing React-specific third-party packages.

Core Mappings

Use e.currentTarget for typed form events. Use signal calls such as value(); do not treat signals like React state variables.

Import Rewrites

// Remove React imports:
import * as React from "react";

// Add Solid imports only when used:
import type { ComponentProps, JSX, ValidComponent } from "solid-js";
import { For, Show, createMemo, createSignal, mergeProps, splitProps } from "solid-js";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import { cn } from "@/lib/utils";

Common path rewrites:

Props Pattern

Use splitProps; do not destructure props directly when values are used in JSX.

import type { ComponentProps } from "solid-js";
import { splitProps } from "solid-js";
import { cn } from "@/lib/utils";

type CardProps = ComponentProps<"div">;

const Card = (props: CardProps) => {
  const [local, others] = splitProps(props, ["class"]);

  return <div data-slot="card" class={cn("z-card", local.class)} {...others} />;
};

Use mergeProps first when defaults are needed:

const mergedProps = mergeProps({ side: "top" } as TooltipProps, props);
const [local, others] = splitProps(mergedProps, ["class", "side"]);

Use Solid's children() helper when children must be inspected, normalized, or reused.

Primitive Pattern

Prefer Kobalte for accessible shadcn-style primitives. Use Corvu when the repo already uses it for that component family, when Kobalte does not provide the primitive, or when Corvu matches the source behavior better.

import * as ButtonPrimitive from "@kobalte/core/button";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ComponentProps, ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
import { cn } from "@/lib/utils";

type ButtonProps<T extends ValidComponent = "button"> = PolymorphicProps<
  T,
  ButtonPrimitive.ButtonRootProps<T>
> &
  Pick<ComponentProps<T>, "class" | "children">;

const Button = <T extends ValidComponent = "button">(props: ButtonProps<T>) => {
  const [local, others] = splitProps(props as ButtonProps, ["class"]);

  return (
    <ButtonPrimitive.Root
      data-slot="button"
      class={cn("z-button", local.class)}
      {...others}
    />
  );
};

Keep primitive imports inside wrapper components. In examples, docs, and blocks, prefer existing Zaidan wrappers when they exist.

Preservation Rules

• Preserve behavior, accessibility, public API, Tailwind classes, CSS variables, and data-slot attributes unless the Solid primitive requires an adaptation.
• Match nearby Zaidan files for naming, exports, data attributes, and types.
• Keep imports minimal.
• Prefer cn() from @/lib/utils for class merging.

Source: carere/zaidan — distributed by TomeVault.