Sandbox

Component 70

About

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Sandbox to your project and fits it to your theme.

Code

How Sandbox is used: the demo's code. The component's own source comes with a free account.

Usage.tsx


import {
  SandboxCodeEditor,
  SandboxConsole,
  SandboxLayout,
  SandboxFileExplorer,
  SandboxPreview,
  SandboxProvider,
  SandboxTabs,
  SandboxTabsContent,
  SandboxTabsList,
  SandboxTabsTrigger,
} from '@/components/ui/sandbox';
import { CodeIcon, AppWindowIcon, TerminalIcon } from 'lucide-react';

const Demo = () => {
  return (
    <SandboxProvider className="h-[400px]">
      <SandboxLayout>
        <SandboxTabs defaultValue="preview">
          <SandboxTabsList>
            <SandboxTabsTrigger value="code">
              <CodeIcon size={14} />
              Code
            </SandboxTabsTrigger>
            <SandboxTabsTrigger value="preview">
              <AppWindowIcon size={14} />
              Preview
            </SandboxTabsTrigger>
            <SandboxTabsTrigger value="console">
              <TerminalIcon size={14} />
              Console
            </SandboxTabsTrigger>
          </SandboxTabsList>
          <SandboxTabsContent value="code">
            <SandboxCodeEditor showTabs />
          </SandboxTabsContent>
          <SandboxTabsContent value="preview">
            <SandboxPreview
              showOpenInCodeSandbox={false}
              showRefreshButton={false}
            />
          </SandboxTabsContent>
          <SandboxTabsContent value="console">
            <SandboxConsole />
          </SandboxTabsContent>
        </SandboxTabs>
      </SandboxLayout>
    </SandboxProvider>
  )
}
  
export default { Demo }