Open-code foundations
Read components.json
Understand the configuration that tells the CLI where to place code, which aliases and styles to use, and how to resolve registries.
8 minute lesson
components.json is a tool configuration file. It records choices the CLI needs when it resolves and writes component code.
Inspect the selected style and base, the CSS entry, aliases for components and utilities, icon choice, and configured registries. Paths must agree with your TypeScript or package import aliases. Changing the file affects future CLI operations; it does not magically rewrite every component you already customized.
The schema also records whether the project uses TypeScript/TSX, React Server Components, CSS variables, and the CSS or Tailwind configuration appropriate to the installed setup. Registry entries can be plain URLs or configured namespaces. Treat namespace names as project configuration because they determine where future code is fetched.
The selected style cannot be changed in place after initialization. More broadly, editing configuration is not a migration: existing source keeps its imports and markup while the next add command follows the new values. A careless alias or base change can leave two incompatible generations of components in the same folder.
Open components.json and trace every alias to TypeScript configuration and a real folder. Confirm the CSS path is loaded, identify the base used by an existing component, and predict the exact destination and imports for the next generated item before adding it.
Lesson completed