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

React	SolidJS
className	class
className?: string	class?: string
Destructured props	splitProps(props, [...])
Destructured default props	mergeProps(defaults, props) before splitProps
{condition && <El />}	<Show when={condition}><El /></Show>
items.map(...) in JSX	<For each={items}>{(item) => ...}</For>
useState	createSignal or createStore
useEffect	createEffect, onMount, or onCleanup
useMemo	createMemo only for reactive derived values
useCallback	Usually remove
forwardRef	Usually remove
React.ReactNode	JSX.Element
React.ComponentProps<"div">	ComponentProps<"div">
lucide-react	lucide-solid
next/image	Native <img> unless local code has a wrapper
next/link	TanStack Router Link or native <a> based on local usage

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

// 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:

React source path	Zaidan path
@/registry/bases/base/lib/utils	@/lib/utils
@/registry/bases/base/ui/*	@/registry/kobalte/ui/*
@/registry/bases/base/hooks/*	@/registry/kobalte/hooks/*
@/registry/bases/base/blocks/*	@/registry/kobalte/blocks/*

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

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.