55 components

Small pages, shared parts.

A deliciously gooey set of react components for Next.js sites: server-rendered by default, styled with SCSS modules, themed by tokens, light and dark. Roasted over a warm campfire until they're just right.

Browse components See the tokens

Principles

Built to weigh little

Server first

Most components are plain server components. Only the few that need state ship JavaScript.

Native where possible

Accordions are <details>, switches are checkboxes, segmented controls are radios. They work before hydration.

Tokens, not overrides

Colours, type, spacing and radii are custom properties. Theme a site by redefining them.

Static friendly

No server APIs, no runtime CSS. Everything exports with output: "export".

Getting started

Use it in a Next.js app

Install it

$ bun add github:Mellow-Technology/gui-mellow sass

02
Let Next compile it
next.config.ts
```
 transpilePackages: ["gui-mellow"]
```
03
Load the tokens once
app/layout.tsx
```
 import "gui-mellow/styles.scss";
```

Make it yours

Every colour, font, space and radius is a token. Override one in your stylesheet and every component follows.

Theme tokens

// my-theme.scss — import after "gui-mellow/styles.scss", then set // data-palette="my-theme". Edited over the default palette; // tokens you didn't change come from the default theme. @use "gui-mellow/styles/theme"; @layer gm.tokens, gm.base; @layer gm.tokens { @include theme.palette( "my-theme", $light: (), $dark: (), $tokens: () ); }