All products
Design systemv0.9
GUI Mellow
Components that stay out of the way
The React components behind every Mellow site, this one included. Server components by default, styled with SCSS modules and themeable tokens, light and dark, and safe for static export.
What it does
Inside GUI Mellow
Light by default
Most components render on the server, and native elements do the work where they can. A page with a button and a theme toggle loads about 2.6 KB of CSS.
Themes and palettes
Every colour, font, radius and shadow is a token. Five palettes ship with it, from solarpunk to cyberpunk, and a live editor exports your own.
Light and dark
Follows the system, or a visitor's choice, restored before the first paint. Any section can pin its own scheme or palette.
Patterns
Faint background textures drawn as SVG tiles that follow the theme. Every product on this site has its own.
Cursor effects
Each palette brings its own cursor and a little magic around it, from ripples to fireflies, drawn on one canvas and off for reduced motion.
Static-export safe
No server APIs, no runtime CSS-in-JS, no next/image. Everything builds with output: "export" and hosts anywhere.
How it fits together
From install to a site that looks like yours
The package ships its sources, and your Next.js app compiles them.
- Add itInstall it from GitHub with Sass, and list it in transpilePackages. There's no bundler and no build step of its own.
- Make it yoursOverride a few tokens, re-theme the defaults with SCSS, or write a whole palette with its own light and dark.
- Ship itEach component brings only its own stylesheet, so a page carries CSS for just what it renders.
At a glance
The details
- Status
- v0.9
- Runs on
- React and Next.js
- License
- MIT
Built with
- React 19
- Next.js
- TypeScript
- Sass modules
- CSS custom properties