bun create

Template a new Bun project with bun create. This is a flexible command that can be used to create a new project from a React component, a create-<template> npm package, a GitHub repo, or a local template.

If you're looking to create a brand new empty project, use bun init.

从 React 组件创建

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 (css file)
7. Starts a frontend dev server automatically.

使用 TailwindCSS 与 Bun

TailwindCSS is an extremely popular utility-first CSS framework used to style web applications.

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

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

We also configure bunfig.toml to use Bun's TailwindCSS plugin with Bun.serve()

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

And a ${component}.css file with @import "tailwindcss"; at the top

@import "tailwindcss";

使用 shadcn/ui 与 Bun

shadcn/ui is an extremely popular 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 necessary TailwindCSS dependencies to your package.json and configures bunfig.toml to use Bun's TailwindCSS plugin with Bun.serve() as described above.

Additionally, we setup the following

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

bun create ./MyComponent.jsx is one of the easiest ways to run code generated from LLMs like Claude or ChatGPT locally.

从 npm 创建

bun create <template> [<destination>]

Assuming you don't have a local template with the same name, this command will download and execute the create-<template> package from npm. The following two commands will behave identically

bun create remix

bunx create-remix

Refer to the documentation of the associated create-<template> package for complete documentation and usage instructions.

从 GitHub 创建

This will download 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 no destination is specified, the repo name will be used.

bun create <user>/<repo> mydir

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

Bun will perform the following steps

• Download the template
• Copy all template files into the destination folder
• Install dependencies with bun install.
• Initialize a fresh Git repo. Opt out with the --no-git flag.
• Run the template's configured start script, if defined.

从本地模板创建

Bun's templater can be extended to support custom templates defined on your local file system. These templates should live 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, navigate to $HOME/.bun-create and create a new directory with the desired name of 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"
}

You can run bun create foo elsewhere on your file system to verify that Bun is correctly finding 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!'"
  }
}

The following fields are supported. Each of these can correspond to a string or array of strings. An array of commands will be executed in order.

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

Reference

CLI flags

Environment variables