Components
Starting preview...
@haydenbleasel
npx shadcn@latest add https://21st.dev/r/haydenbleasel/sandbox
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 }