import { IntroSection, IntroCard } from "../../components/IntroCard";
import { Callout, Tabs, Tab } from "nextra-theme-docs";
import { CodeBlock } from "../../components/CodeBlock";

# Install

Install the Sandpack dependency on your project.

<Tabs items={["npm", "yarn", "pnpm"]}>

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

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

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

All the components and the bundler are packed inside the `Sandpack` component, which is a named export of the package. Besides that, the package contains multiple **components**, **utilities** and **typings**.

## Quickstart

This should give you a nice code editor with a preview that runs in the browser.

<CodeBlock stack>
{`import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}
`}
</CodeBlock>

## CDN

To use Sandpack with CDN, simply include the Sandpack tag in your HTML file and specify the CDN imports inluding Sandpack and its dependencies.

<br />

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@18.2.0",
          "react-dom": "https://esm.sh/react-dom@18.2.0",
          "react-dom/": "https://esm.sh/react-dom@18.2.0/",
          "@codesandbox/sandpack-react": "https://esm.sh/@codesandbox/sandpack-react@2.8.0"
        }
      }
    </script>

    <script type="module">
      import React from "react";
      import { createRoot } from "react-dom/client";
      import { Sandpack } from "@codesandbox/sandpack-react";

      const root = createRoot(document.getElementById("root"));
      const sandpackComponent = React.createElement(
        Sandpack,
        { template: "react" },
        null
      );
      root.render(sandpackComponent);
    </script>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>
```

## Next steps

<IntroSection>
  <IntroCard
    icon="Code"
    title="Templates & files"
    description="Learn how to add files to your projects and start coding in record time."
    href="/docs/getting-started/usage"
  />

  <IntroCard
    icon="Theme"
    title="Themes"
    description="Design and customize your own theme and find other Sandpack presets."
    href="/docs/getting-started/themes"
  />
</IntroSection>
