bun create

Template a new Bun project with bun create. It creates a project from a React component, a create-<template> npm package, a GitHub repo, or a local template.

To create an empty project, use bun init.

From a React component#

bun create ./MyComponent.tsx turns an existing React component into a complete dev environment with hot reload and production builds in one command.

bun create ./MyComponent.jsx # .tsx also supported

How this works#

When you run bun create <component>, Bun:

1. Uses Bun's JavaScript bundler to analyze your module graph.
2. Collects all the dependencies needed to run the component.
3. Scans the exports of the entry point for a React component.
4. Generates a package.json file with the dependencies and scripts needed to run the component.
5. Installs any missing dependencies using bun install --only-missing.
6. Generates the following files:
   • ${component}.html
   • ${component}.client.tsx (entry point for the frontend)
   • ${component}.css
7. Starts a frontend dev server.

Using TailwindCSS with Bun#

TailwindCSS is a utility-first CSS framework for styling web applications.

When you run bun create <component>, Bun scans your JSX/TSX file (and any files it imports) for TailwindCSS class names. If Bun detects TailwindCSS class names, it adds the following dependencies to your package.json:

{
  "dependencies": {
    "tailwindcss": "^4",
    "bun-plugin-tailwind": "latest"
  }
}

Bun also configures bunfig.toml to use its TailwindCSS plugin with Bun.serve():

[serve.static]
plugins = ["bun-plugin-tailwind"]

Bun also writes a ${component}.css file with @import "tailwindcss"; at the top:

@import "tailwindcss";

Using shadcn/ui with Bun#

shadcn/ui is a component library tool for building web applications.

bun create <component> scans for any shadcn/ui components imported from @/components/ui.

If it finds any, it runs:

# Assuming bun detected imports to @/components/ui/accordion and @/components/ui/button
bunx shadcn@canary add accordion button # and any other components

Since shadcn/ui itself uses TailwindCSS, bun create also adds the TailwindCSS dependencies to your package.json and configures bunfig.toml to use Bun's TailwindCSS plugin with Bun.serve(), as described earlier.

bun create also sets up:

• tsconfig.json to alias "@/*" to "src/*" or . (depending on whether there is a src/ directory)
• components.json so that shadcn/ui knows it's a shadcn/ui project
• styles/globals.css file that configures Tailwind v4 the way shadcn/ui expects
• ${component}.build.ts file that builds the component for production with bun-plugin-tailwind configured

Use bun create ./MyComponent.jsx to run code generated by LLMs like Claude or ChatGPT locally.

From npm#

bun create <template> [<destination>]

If you don't have a local template with the same name, this command downloads and runs the create-<template> package from npm. These two commands are equivalent:

bun create remix
bunx create-remix

Refer to the create-<template> package's documentation for usage instructions. For react and next, Bun doesn't run a package; it only prints a message pointing to react-app/vite and next-app.

From GitHub#

bun create <user>/<repo> downloads the contents of the GitHub repo to disk.

bun create <user>/<repo>
bun create github.com/<user>/<repo>

Optionally specify a name for the destination folder. If you don't, Bun uses the repo name.

bun create <user>/<repo> mydir
bun create github.com/<user>/<repo> mydir

Bun then:

• Downloads the template
• Copies all template files into the destination folder
• Installs dependencies with bun install
• Initializes a fresh Git repo. Opt out with the --no-git flag.

From a local template#

You can define custom templates on your local file system. Put them in one of the following directories:

• $HOME/.bun-create/<name>: global templates
• <project root>/.bun-create/<name>: project-specific templates

To create a local template, create a directory in $HOME/.bun-create named after your template.

cd $HOME/.bun-create
mkdir foo
cd foo

Then, create a package.json file in that directory with the following contents:

{
  "name": "foo"
}

Run bun create foo elsewhere on your file system to verify that Bun finds your local template.

Setup logic#

You can specify pre- and post-install setup scripts in the "bun-create" section of your local template's package.json.

{
  "name": "@bun-examples/simplereact",
  "version": "0.0.1",
  "main": "index.js",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "bun-create": {
    "preinstall": "echo 'Installing...'", // a single command
    "postinstall": ["echo 'Done!'"], // an array of commands
    "start": "bun run echo 'Hello world!'"
  }
}

preinstall and postinstall accept a string or an array of strings. An array of commands runs in order.

After cloning a template, bun create removes the "bun-create" section from package.json before writing it to the destination folder.

Reference#

CLI flags#

Environment variables#