g o o b e r

A less than 1KB css-in-js solution

g o o b e r

A less than 1KB css-in-js solution

The Great Shave Off Challenge

import { styled } from 'goober';

const Button = styled('button')`
  border: 0;
  background: dodgerblue;

  span {
    color: white;
  }

  &:hover {
    background: tomato;
    span {
      color: black;
    }
  }
`;

npm install goober

Features

Even though small in size goober has got you covered, feature wise.

Lightweight

As the subtitle notes, this is the smallest and fullest featured css-in-js solution out there. Weighing at 1KB and once bundled it's gonna be less due to tree-shake.

Familiar API

goober is built on the shoulders of well established solutions. That means the API has been paved and we need to follow it. You'll find as , forwardRef , css , keyframes , styled and so much more.

Theming

Easily access your common sizes, colors, anything really with the use of a theme.

Performant

goober does more with less! Since the code measure less in size, it's served, read and ran quicker.

Server-Side Rendering

On the server you can easily extract the css for the current state with extractCss .

Why the 🥜

The initial thought of goober was a css-in-js solution at the cost of peanunts. Hence the peanuts emoji.

Build more

By using goober , you are practically getting back space in size to build more of the needed features.

Take goober for a spin.

goober

A less than 1KB css-in-js solution.

This website was built with wmr and goober .

Maintained with love by a bunch of good people.