# Choose your setup

Choose the smallest package set that produces the output your application needs. Core is the default
when SVG or terminal text is enough; renderer and framework packages build on it.

## Choose a package

| Package                                    | Choose it for                                    | Outputs                                                                 |
| ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------- |
| [`@qrcodesdk/core`](/packages/core/)       | Runtime-neutral generation and raw matrix access | SVG `string`, terminal text `string`, `QRCodeMatrix`                    |
| [`@qrcodesdk/browser`](/packages/browser/) | Direct DOM output and client-side downloads      | `HTMLCanvasElement`, PNG-backed `HTMLImageElement`, SVG or PNG download |
| [`@qrcodesdk/node`](/packages/node/)       | Server-side raster output                        | PNG `Buffer`                                                            |
| [`@qrcodesdk/react`](/packages/react/)     | React and Next.js components                     | `QRCodeSVG`, `QRCodeImage`, `QRCodeCanvas`, SVG or PNG download         |
| [`@qrcodesdk/vue`](/packages/vue/)         | Vue components                                   | `QRCodeSVG`, `QRCodeImage`, `QRCodeCanvas`, SVG or PNG download         |
| [`@qrcodesdk/svelte`](/packages/svelte/)   | Svelte components                                | `QRCodeSVG`, `QRCodeImage`, `QRCodeCanvas`, SVG or PNG download         |
| [`@qrcodesdk/angular`](/packages/angular/) | Standalone Angular components                    | `QRCodeSVG`, `QRCodeImage`, `QRCodeCanvas`, SVG or PNG download         |
| [`@qrcodesdk/cli`](/packages/cli/)         | Terminal, shell, and CI workflows                | Terminal text, SVG file, PNG file                                       |

For an output-first comparison with exact return types, see [Renderer outputs](/reference/renderers/).

## Install Core

Use this default when you need SVG, terminal text, or raw matrix output.

<PackageManagerTabs packages={['@qrcodesdk/core']} mode="add" />

## Install browser output

Add Canvas elements, PNG-backed Image elements, and browser download helpers.

<PackageManagerTabs packages={['@qrcodesdk/core', '@qrcodesdk/browser']} mode="add" />

## Install Node.js PNG output

<PackageManagerTabs packages={['@qrcodesdk/core', '@qrcodesdk/node']} mode="add" />

## Install React components

<PackageManagerTabs
  packages={['@qrcodesdk/core', '@qrcodesdk/browser', '@qrcodesdk/react']}
  mode="add"
/>

React and React DOM are peer dependencies; use the versions already selected by your application.

## Install Vue components

<PackageManagerTabs
  packages={['@qrcodesdk/core', '@qrcodesdk/browser', '@qrcodesdk/vue']}
  mode="add"
/>

Vue is a peer dependency; use the Vue 3 version already selected by your application.

## Install Svelte components

<PackageManagerTabs
  packages={['@qrcodesdk/core', '@qrcodesdk/browser', '@qrcodesdk/svelte']}
  mode="add"
/>

Svelte is a peer dependency; use the Svelte 5 version already selected by your application.

## Install Angular components

<PackageManagerTabs
  packages={['@qrcodesdk/core', '@qrcodesdk/browser', '@qrcodesdk/angular']}
  mode="add"
/>

Angular, RxJS, and their normal runtime dependencies are peers; use your application's versions.

## Install the CLI

<PackageManagerTabs packages={['@qrcodesdk/cli']} mode="addGlobal" />

## Next steps

Open the package page linked in the table for its minimal example and package-specific behavior. If
you chose Core, continue with the [SVG string renderer](/reference/renderers/svg/).