The official shared React UI component library for the Site Package Manager (SPM) ecosystem.
spm-components is the shared layout library that holds the user interface elements used to reconstruct legacy web interfaces. The components are written in React and styled with vanilla CSS custom properties matching the visual design tokens of active themes.
The library is organized into two primary categories:
- Primitives (
primitives/): Base modular layout components and helper blocks (such as primitive grids, flex slots, container wrappers, indicators, or loading state skeletons). - Dedicated Components (
dedicated/): Specific functional layouts designed to replace key sections of legacy pages (such as header navigation barsUiNavHeader, search utilitiesUiSearchBar, or catalog boardsUiGridPage).
This repository is linked as a Git submodule under src/components/ in the main extension repository.
When building or extending components in this library:
- CSS Variables: Never use hardcoded colors. Always style items using custom property tokens (e.g.
var(--spm-bg-primary),var(--spm-text-primary)). - Props Flexibility: Always include
classNameandstylein prop interfaces and spread them onto the root elements. - Conditional Rendering: Keep rendering checks conditional on data presence to avoid orphan markup or visual gaps when scraping rules fail.
- Auto-Registration: After adding a component, run
npm run build-registryin the extension repository to parse the props interface and rebuild the manifest schema registry.
This project is licensed under the MIT License - see the LICENSE file for details.