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 }