The component library every interface I build starts from — including the page you are reading.
Status
Private
My part in it
It is mine — I designed it and set its direction: the components, the tokens underneath them and the theming that lets one library look like several different products. The package build is a 2026 QUT Capstone project, run in partnership with QUT and V Source Development.
Built with
React
TypeScript
SCSS
Storybook
Jest
Figma
01
Why not Tailwind or Material UI
Off-the-shelf kits optimise for getting something on screen fast, and the price is that every product built with them looks like every other product built with them. Owning the library means the interface gets designed for the business in front of me instead of assembled from someone else’s parts.
It also means nobody else’s release schedule can break a client’s product. When something changes in SAUCE, it changes because I changed it.
02
One library, many faces
Colours, type, spacing and surfaces are tokens, not values written into components. A medical platform, a training platform and this site all run on the same parts and look nothing alike, because the theme is swapped rather than the components rewritten.
Accessibility is built into the parts rather than checked afterwards — contrast is measured against every surface a component can sit on, and focus, keyboard and reduced-motion behaviour come with the component, not with the page that uses it.
03
From a folder to a package
It started as a folder copied between projects. It is becoming an installable package with its own publish pipeline, so a fix made once reaches every product that uses it.
That build is a 2026 QUT Capstone project, a partnership between QUT and V Source Development, with me as the industry supervisor. Students building on it means the documentation has to make sense to someone who has never seen the code — the same standard a client should expect.