11 KiB
{% callout %}
Note — You don’t need bun create to use Bun. You don’t need any configuration at all. This command exists to make getting started a bit quicker and easier.
{% /callout %}
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.
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
{% raw %}
{% /raw %}
{% callout %}
🚀 Create React App Successor — bun create <component> provides everything developers loved about Create React App, but with modern tooling, faster builds, and backend support.
{% /callout %}
How this works
When you run bun create <component>, Bun:
- Uses Bun's JavaScript bundler to analyze your module graph.
- Collects all the dependencies needed to run the component.
- Scans the exports of the entry point for a React component.
- Generates a
package.jsonfile with the dependencies and scripts needed to run the component. - Installs any missing dependencies using
bun install --only-missing. - Generates the following files:
${component}.html${component}.client.tsx(entry point for the frontend)${component}.css(css file)
- Starts a frontend dev server automatically.
Using TailwindCSS with 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";
Using shadcn/ui with 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.jsonto alias"@/*"to"src/*"or.(depending on if there is asrc/directory)components.jsonso that shadcn/ui knows its a shadcn/ui projectstyles/globals.cssfile that configures Tailwind v4 in the way that shadcn/ui expects${component}.build.tsfile that builds the component for production withbun-plugin-tailwindconfigured
bun create ./MyComponent.jsx is one of the easiest ways to run code generated from LLMs like Claude or ChatGPT locally.
From 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.
From 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-gitflag. - Run the template's configured
startscript, if defined.
{% callout %}
By default Bun will not overwrite any existing files. Use the --force flag to overwrite existing files.
{% /callout %}
From a local template
{% callout %}
⚠️ Warning — Unlike remote templates, running bun create with a local template will delete the entire destination folder if it already exists! Be careful.
{% /callout %}
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
{% callout %}
Note — You can customize the global template path by setting the BUN_CREATE_DIR environment variable.
{% /callout %}
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.
{% table %}
postinstall- runs after installing dependencies
preinstall- runs before installing dependencies
{% /table %}
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
{% table %}
- Flag
- Description
--force- Overwrite existing files
--no-install- Skip installing
node_modules& tasks
--no-git- Don’t initialize a git repository
--open- Start & open in-browser after finish
{% /table %}
Environment variables
{% table %}
- Name
- Description
GITHUB_API_DOMAIN- If you’re using a GitHub enterprise or a proxy, you can customize the GitHub domain Bun pings for downloads
GITHUB_TOKEN(orGITHUB_ACCESS_TOKEN)- This lets
bun creatework with private repositories or if you get rate-limited.GITHUB_TOKENis chosen overGITHUB_ACCESS_TOKENif both exist.
{% /table %}
{% details summary="How bun create works" %}
When you run bun create ${template} ${destination}, here’s what happens:
IF remote template
- GET
registry.npmjs.org/@bun-examples/${template}/latestand parse it - GET
registry.npmjs.org/@bun-examples/${template}/-/${template}-${latestVersion}.tgz - Decompress & extract
${template}-${latestVersion}.tgzinto${destination}- If there are files that would overwrite, warn and exit unless
--forceis passed
- If there are files that would overwrite, warn and exit unless
IF GitHub repo
- Download the tarball from GitHub’s API
- Decompress & extract into
${destination}- If there are files that would overwrite, warn and exit unless
--forceis passed
- If there are files that would overwrite, warn and exit unless
ELSE IF local template
-
Open local template folder
-
Delete destination directory recursively
-
Copy files recursively using the fastest system calls available (on macOS
fcopyfileand Linux,copy_file_range). Do not copy or traverse intonode_modulesfolder if exists (this alone makes it faster thancp) -
Parse the
package.json(again!), updatenameto be${basename(destination)}, remove thebun-createsection from thepackage.jsonand save the updatedpackage.jsonto disk.- IF Next.js is detected, add
bun-framework-nextto the list of dependencies - IF Create React App is detected, add the entry point in /src/index.{js,jsx,ts,tsx} to
public/index.html - IF Relay is detected, add
bun-macro-relayso that Relay works
- IF Next.js is detected, add
-
Auto-detect the npm client, preferring
pnpm,yarn(v1), and lastlynpm -
Run any tasks defined in
"bun-create": { "preinstall" }with the npm client -
Run
${npmClient} installunless--no-installis passed OR no dependencies are in package.json -
Run any tasks defined in
"bun-create": { "postinstall" }with the npm client -
Run
git init; git add -A .; git commit -am "Initial Commit";- Rename
gitignoreto.gitignore. NPM automatically removes.gitignorefiles from appearing in packages. - If there are dependencies, this runs in a separate thread concurrently while node_modules are being installed
- Using libgit2 if available was tested and performed 3x slower in microbenchmarks
- Rename
{% /details %}