---
title: Playground
---

import { Tabs, Tab } from "nextra-theme-docs";
import { Playground } from "../components/Playground"

# Sandpack quickstart

With Sandpack, you can easily create interactive components and test your code in real-time, without leaving your browser. Whether you are a beginner or an experienced developer, you will find Sandpack a valuable and fun tool to use.

<br />

##### 1. Install

Install the Sandpack dependency on your project.

<Tabs items={["npm", "yarn", "pnpm"]}>
  <Tab>  
```shell
npm i @codesandbox/sandpack-react
```
  </Tab>

  <Tab>
```bash
yarn add @codesandbox/sandpack-react 
```
  </Tab>

  <Tab>
    ```bash
pnpm i @codesandbox/sandpack-react 
```
  </Tab>
</Tabs>


<Playground />