Sandpack

import {
  SandpackProvider,
  SandpackLayout,
  SandpackPreview
} from '@codesandbox/sandpack-react';

// Load code as string
import code from './../demo-1.tsx?raw';

export default function CodeContainer() {
  return (
    <SandpackProvider
      files={{
        '/App.tsx': code
      }}
      template="react-ts"
    >
      <SandpackLayout>
        <SandpackPreview />
      </SandpackLayout>
    </SandpackProvider>
  );
}

import {
  SandpackProvider,
  SandpackLayout,
  SandpackPreview
} from '@codesandbox/sandpack-react';

// Load code as string
import code from './../demo-2.tsx?raw';

export default function CodeContainer() {
  return (
    <SandpackProvider
      files={{
        '/App.tsx': code
      }}
      customSetup={{
        dependencies: {
          '@chakra-ui/react': '^1.8.5',
          '@emotion/react': '^11',
          '@emotion/styled': '^11',
          'framer-motion': '^6'
        }
      }}
      template="react-ts"
    >
      <SandpackLayout>
        <SandpackPreview />
      </SandpackLayout>
    </SandpackProvider>
  );
}

import {
  SandpackProvider,
  SandpackLayout,
  SandpackPreview
} from '@codesandbox/sandpack-react';

// Load code as string
import css from './../../pages/output.css?raw';
import code from './../demo-3.tsx?raw';
import ds from './../../.build-ds/index.js?raw';

export default function CodeContainer() {
  return (
    <SandpackProvider
      files={{
        '/styles.css': {
          hidden: true,
          code: css
        },
        '/App.tsx': code,
        '/node_modules/@design-system/package.json': {
          hidden: true,
          code: JSON.stringify({
            name: '@design-system',
            main: './index.js'
          })
        },
        '/node_modules/@design-system/index.js': {
          hidden: true,
          code: ds
        }
      }}
      template="react-ts"
      customSetup={{
        dependencies: {
          react: '18.0.0',
          'react-dom': '18.0.0'
        }
      }}
    >
      <SandpackLayout>
        <SandpackPreview />
      </SandpackLayout>
    </SandpackProvider>
  );
}