React To Solid

React to SolidJS

Use this skill for the translation itself. Use .agents/skills/shadcn-to-zaidan/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.

Source-of-Truth and Dependency Policy

For Zaidan's shadcn release sync, the pinned Base UI component API, behavior, slots, and styling contract are authoritative. Do not preserve an older Zaidan API merely for backward compatibility. Record only unavoidable Solid-specific divergences.

Choose an implementation foundation in this order:

1. Kobalte when it has an equivalent accessible primitive.
2. Corvu when Kobalte has no adequate equivalent and Corvu does.
3. Vanilla SolidJS when neither primitive library fits.

For other React-only packages, read docs/third-party-deps.md, search for an actively maintained SolidJS flavor, and compare behavior/API coverage before writing a local adapter. Never carry a React runtime dependency into registry code merely because upstream imports it.

Import Rewrites

tsxCopy code
// 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.

tsxCopy code
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:

tsxCopy code
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 only when Kobalte does not provide an adequate equivalent. Use vanilla SolidJS when neither library fits.

tsxCopy code
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.
• Replace upstream app-only helpers such as IconPlaceholder with the concrete Zaidan icon choice, normally lucide-solid.
• Preserve upstream semantic cn-* style markers as Zaidan z-* markers. Translate selectors, data attributes, and CSS variables to the actual Kobalte/Corvu DOM; do not assume a mechanical rename is sufficient.
• When a component changes, inspect and update its section in all eight Zaidan styles: Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea.
• Verify state selectors in the browser. The Base UI mapping reference is a starting table, not proof that a selector matches the rendered primitive.