# React To Solid

React-to-SolidJS transformation patterns for porting shadcn-style React components...

- Repository: https://github.com/nightly-labs/openbot (4509 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nightly-labs/openbot --skill react-to-solid -g -a claude-code -y`
Codex: `npx skills add nightly-labs/openbot --skill react-to-solid -g -a codex -y`
Cursor: `npx skills add nightly-labs/openbot --skill react-to-solid -g -a cursor -y`
Gemini CLI: `npx skills add nightly-labs/openbot --skill react-to-solid -g -a gemini-cli -y`

## Description

React-to-SolidJS transformation patterns for porting shadcn-style React components, examples, docs snippets, and blocks into Zaidan. Use when converting React TSX, React hooks, Radix/Base UI/shadcn patterns, Next-style code, or React-specific dependencies to idiomatic SolidJS.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

The rest: https://github.com/nightly-labs/openbot/blob/HEAD/.agents/skills/react-to-solid/SKILL.md