Installation
Scaffold a new Gridland project or add Gridland to an existing app
Gridland renders terminal-style UIs directly to an HTML5 Canvas using React. Built on the opentui engine. No xterm.js, no terminal emulator, just a React reconciler, Yoga layout, and canvas pixels.
Start a new project
Scaffold a new Gridland app with everything pre-configured bundler, shadcn registry, themes, and example components. You can then add components with a single command:
bunx create-gridland my-app
cd my-app
bunx create-gridland add spinnernpx create-gridland my-app
cd my-app
npx create-gridland add spinneryarn create gridland my-app
cd my-app
yarn dlx create-gridland add spinnerpnpm create gridland my-app
cd my-app
pnpm dlx create-gridland add spinnercreate-gridland add detects your package manager and proxies to shadcn under
the hood scaffolded projects already have components.json wired up so it
just works.
Add to an existing project
If you already have a React app, pick your bundler:
Vite
Quickest setup one plugin, zero config.
Next.js
For server-rendered apps using the App Router.
Manual Installation
Webpack, Rspack, or any other bundler. Also covers shadcn setup and the full component list.
Install components
Gridland UI components are distributed via a shadcn registry components are copied into your project so you own the code and can customize them freely. Scaffolded projects have shadcn pre-configured, so you can add components right away:
bunx create-gridland add spinnerFor the full list of components, shared utilities, and the components.json
setup for non-scaffolded projects, see Manual Installation →
Install components.