Add a component
2 minutes read
A site cannot add a component without changing the theme or its fork: components are theme units, not content files. Adding one never edits a shared index file, because the registry discovers components/<name>/ by listing the folder.
- Make
components/<name>/, using lowercase kebab-case. The folder name is the component's name and the directive an author writes. - Add
index.tswith the Preact component written withh(), never JSX, and a default export typed by the engine's component contract. The props arrive as strings from the directive's attributes, and the directive's body arrives as rendered HTML. - Add
style.cssonly when the component has styles. Read tokens withvar(--…), use logical properties, and name classes after the component: the root is<name>, its parts add a suffix such as<name>-title. - Add
client.tsonly when the component needs the browser. It is an island: it ships only on pages that use the component, and every control it enhances startshiddenso the page still reads without JavaScript. - Add
test/component-<name>.test.tsbeside the other component tests. Test the rendered element, each variant, escaping, and the source position. - Run
npm run check. The registry finds the new folder, and an unknown directive or a missing default export becomes a diagnostic naming the file.
The full rules for a unit are in components/README.md in the repository.