Installing Components

Gridland UI components are distributed via a shadcn registry. Components are copied into your project so you own the code and can customize it freely.

Projects created with create-gridland already have shadcn configured — skip to Step 2.

Configure shadcn

Create a components.json file in your project root with the Gridland registry:

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "",
    "baseColor": "neutral",
    "cssVariables": false
  },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@gridland": "https://gridland.io/r/{name}.json"
  }
}

Set "rsc": true if you're using Next.js with React Server Components.

Make sure your tsconfig.json has a @/* path alias configured (e.g. "@/*": ["./src/*"] for Vite or "@/*": ["./*"] for Next.js).

Add components

Install components from the Gridland registry:

Terminal

bunx shadcn@latest add @gridland/<component-name>

Terminal

npx shadcn@latest add @gridland/<component-name>

Terminal

yarn dlx shadcn@latest add @gridland/<component-name>

Terminal

pnpm dlx shadcn@latest add @gridland/<component-name>

For example, to install the Spinner component:

bunx shadcn@latest add @gridland/spinner

Components that depend on shared utilities (like theme or text-style) will automatically install those dependencies alongside the component.

Available components

Component	Registry name
Ascii	`ascii`
Chat	`chat`
Gradient	`gradient`
Link	`link`
Message	`message`
Modal	`modal`
Multi Select	`multi-select`
Prompt Input	`prompt-input`
Select Input	`select-input`
Spinner	`spinner`
Status Bar	`status-bar`
Tab Bar	`tab-bar`
Table	`table`
Terminal Window	`terminal-window`
Text Input	`text-input`
Chain of Thought	`chain-of-thought`

Shared utilities

These are installed automatically when needed by a component:

Utility	Registry name	Description
Theme	`theme`	Theme context, provider, and built-in dark/light themes
Text Style	`text-style`	Helper to convert text decoration flags to opentui style objects
Provider	`provider`	GridlandProvider root component with theme and keyboard context
Breakpoints	`breakpoints`	Responsive breakpoints hook using terminal dimensions

Installing Components

Configure shadcn

Add components

Available components

Shared utilities

On this page