JavaScript

Core Idea

shadcn/ui components are authored in TypeScript, but a JavaScript-only opt-out is supported via the tsx flag in components.json.

Key Concepts

• tsx: false: In components.json, disables TypeScript output; the CLI installs the JavaScript version of components instead.
• jsconfig.json: JS equivalent of tsconfig.json paths, needed to resolve the @/* import alias in JS projects.

Code Examples

{
  "style": "new-york",
  "rsc": false,
  "tsx": false,
  "tailwind": { "config": "", "css": "src/app/globals.css", "baseColor": "zinc", "cssVariables": true },
  "iconLibrary": "lucide",
  "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }
}

• O que demonstra: components.json completo configurado pra projeto JavaScript puro (tsx: false).

{
  "compilerOptions": { "paths": { "@/*": ["./*"] } }
}

• O que demonstra: como resolver o alias @/* sem TypeScript.

Key Takeaways

1. TypeScript remains the recommended default; JS support exists only via the tsx: false flag.
2. jsconfig.json must mirror the paths mapping normally done in tsconfig.json.

Connects To

• installation/components.json (main docs): full schema for the config file referenced here.