Skip to main content
Next.js app with Tailwind and shadcn/ui. The dev server starts automatically on port 3000.

​
Set up Next.js with shadcn

Scaffold a Next.js project with TypeScript, Tailwind CSS, and every shadcn component ready to use. We pin specific versions to ensure reproducible builds. 
// template.ts
import { Template, waitForURL } from 'e2b'

export const template = Template()
  .fromNodeImage('21-slim')
  .setWorkdir('/home/user/nextjs-app')
  .runCmd(
    'npx create-next-app@14.2.30 . --ts --tailwind --no-eslint --import-alias "@/*" --use-npm --no-app --no-src-dir'
  )
  .runCmd('npx shadcn@2.1.7 init -d')
  .runCmd('npx shadcn@2.1.7 add --all')
  .runCmd(
    'mv /home/user/nextjs-app/* /home/user/ && rm -rf /home/user/nextjs-app'
  )
  .setWorkdir('/home/user')
  .setStartCmd('npx next --turbo', waitForURL('http://localhost:3000'))

​
Build and publish

Build the template. The first build takes a few minutes since it installs all shadcn components. 
// build.ts
import { Template, defaultBuildLogger } from 'e2b'
import { template as nextJSTemplate } from './template'

await Template.build(nextJSTemplate, 'nextjs-app', {
  cpuCount: 4,
  memoryMB: 4096,
  onBuildLogs: defaultBuildLogger(),
})

​
Access your app

Create a sandbox and grab the URL. The dev server with Turbopack is already running on port 3000. 
import { Sandbox } from 'e2b'

const sandbox = await Sandbox.create('nextjs-app', { timeoutMs: 60_000 })

const url = sandbox.getHost(3000)
console.log('Next.js app running at:', url)