@smartyweb/ui
v1.5.0
Published
Shared React component library consumed by multiple Next.js microservices via private npm.
Readme
@smartyweb/ui
Shared React component library consumed by multiple Next.js microservices via private npm.
Installation
npm install @smartyweb/uiRequires React 19 (a peer dependency). Import the stylesheet once in your app's entry point, then import components:
import "@smartyweb/ui/styles.css";
import { H1, Button } from "@smartyweb/ui";Font Setup
This library does not bundle fonts. Consumers load fonts and expose them as CSS custom properties. The library reads these three variables:
| CSS variable | Font | Used by |
| ------------------- | ------------ | --------------------------------- |
| --ui-font-primary | TT Hoves Pro | All heading and button components |
| --ui-font-body | Inter | Body and paragraph components |
| --ui-font-code | Hack | Code component |
In a Next.js app using next/font/local, set these on the root element:
// app/layout.tsx
import localFont from "next/font/local";
const ttHovesPro = localFont({
src: [...],
variable: "--font-tthoves",
});
export default function RootLayout({ children }) {
return (
<html className={ttHovesPro.variable}>
<body
style={{
"--ui-font-primary": "var(--font-tthoves, 'TT Hoves Pro', system-ui, sans-serif)",
}}
>
{children}
</body>
</html>
);
}If a variable is not set, components fall back to system-ui (headings/body) or monospace (code).
Developing this library
This is a skills-driven codebase — for any repeatable task, reach for a skill (or author one) rather than doing it by hand. Skills are verified, step-by-step walkthroughs that encode our process; run one by typing its slash command in Claude Code.
| Skill | What it does |
| ------------------ | -------------------------------------------------------------------------------------- |
| /validate-tokens | Validate a Tokens Studio sync end-to-end — drift, math, Figma source-of-truth. |
| /version-up | Cut a new version with changesets (bump, changelog, release prep). |
| /commit-push | Commit and push all changes with a summary commit message. |
| /link-ui | Live-link local @smartyweb/ui into storefront-2 so edits show up without publishing. |
Local commands, for the times you do need to run something by hand:
npm install # install dependencies
npm run storybook # generate tokens, then run Storybook (component workbench)
npm run build # generate tokens, then build to dist/
npm run tokens # regenerate src/styles/generated/*.generated.scss from tokens.jsonFor how the codebase is laid out and why it's built this way, see CLAUDE.md, docs/PRINCIPLES.md, and the decision records in docs/adr/.