shadcn registry

Developer setup

Configure your app to install KrakStack registry items through shadcn, then add components and services by their @krak-stack registry names.

Install checklist

Run shadcn from the project root.

Open the app that owns components.json.
Confirm the @krak-stack registry alias is configured.
Use @krak-stack/<item-name>; do not copy files from this site by hand.
Install one registry item at a time.

Review checklist

Finish the install by checking the generated source like any other code change.

Inspect the generated diff before editing further.
Keep public-facing strings localized in the host application.
Run the project checks below when practical.
Commit the generated source files with the feature that uses them.

components.json registry alias

Use the hosted registry for normal application development. The registry alias belongs in components.json. Keep the URL pointed at the hosted registry for normal development.

json

{
  "registries": {
    "@krak-stack": "https://krakstack.net/r/{name}.json"
  }
}

Adding registry items

Install items by their @krak-stack registry name instead of copying files by hand.

bash

bunx shadcn@latest add @krak-stack/data-table
bunx shadcn@latest add @krak-stack/pagination

opencode checklist

Set up opencode so agents can find shadcn components before writing custom UI.

opencode.json

Add the shadcn MCP server to opencode.json.
Keep AGENTS.md in instructions so agents read the registry workflow.
Restart opencode after changing opencode.json.
Before asking for custom UI, ask the agent to check shadcn MCP first.

json

{
  "$schema": "https://opencode.ai/config.json",
  "instructions": ["AGENTS.md"],
  "mcp": {
    "shadcn": {
      "type": "local",
      "command": ["bunx", "--bun", "shadcn@latest", "mcp"],
      "enabled": true
    }
  }
}

Review checklist

Finish the install by checking the generated source like any other code change.

bash

bun type:check
bun lint
bun fmt:check