import { pageMetadata } from "@/lib/page-metadata"
export const metadata = pageMetadata("docs/installation")

# Installation

Install the core package plus your renderer of choice.

## For React UI

<PackageInstall packages="@json-render/core @json-render/react" />

Peer dependencies: `react ^19.0.0` and `zod ^4.0.0`.

<PackageInstall packages="react zod" />

## For Vue

<PackageInstall packages="@json-render/core @json-render/vue" />

Peer dependencies: `vue ^3.5.0` and `zod ^4.0.0`.

<PackageInstall packages="vue zod" />

## For React UI with shadcn/ui

Pre-built components for fast prototyping and production use:

<PackageInstall packages="@json-render/core @json-render/react @json-render/shadcn" />

Requires Tailwind CSS in your project. See the [@json-render/shadcn API reference](/docs/api/shadcn) for usage.

## For React Native

<PackageInstall packages="@json-render/core @json-render/react-native" />

## For Remotion Video

<PackageInstall packages="@json-render/core @json-render/remotion remotion @remotion/player" />

## For External State Management (Optional)

If you want to wire json-render to an existing state management library instead of the built-in store, install the adapter for your library:

<PackageInstall packages="@json-render/zustand" />

<PackageInstall packages="@json-render/redux" />

<PackageInstall packages="@json-render/jotai" />

<PackageInstall packages="@json-render/xstate" />

See the [Data Binding](/docs/data-binding#external-store-controlled-mode) guide for usage.

## For AI Integration

To use json-render with AI models, you'll also need the Vercel AI SDK:

<PackageInstall packages="ai" />