Nanostyled is a tiny library (< 1 Kb) for building styled UI elements in React and Preact.
Like a CSS-in-JS library, nanostyled encapsulates complex styles into simple, tweakable components:
<Button>A nice-looking button</Button><Button ="blue">A nice-looking button that is blue</Button>
Unlike a CSS-in-JS library, nanostyled doesn't parse CSS in JS, which makes your bundle smaller, your components faster, and your server-side-rendering a breeze.
|Low overhead||Props-controlled, component-based API||Zero-config SSR|
- Use in Preact and other React-like libraries
- API Reference
- Server-Side Rendering
- Related Projects
- Browser Support
npm install nanostyled
A nanostyled Button
import nanostyled from 'nanostyled';// This example uses CSS classes from Tachyonsimport 'tachyons/css/tachyons.css';// A Button via three style props:const Button =;const App =<div><Button>Base Button</Button><Button ="bg-yellow">Yellow Button</Button></div>;
<App /> produces this markup:
Base ButtonYellow Button
When a nanostyled component renders, it consumes its style props and merges them into an HTML class string, as per above.
Which style props to use is up to you. In the
<Button> above, it would be
- Easy to change text color via the
- Easy to change background color via the
- Hard to change other styles without totally rewriting the
A more flexible Button
By using more style props, we can make a more flexible button:
import nanostyled from 'nanostyled';import 'tachyons/css/tachyons.css';const FlexibleButton =;
Rendering a stock
<FlexibleButton /> will produce the same markup as its
simpler relative. But it's much easier to render alternate styles:
<FlexibleButton ="bg-light-green" ="black" ="fw9" ="br4">Button with a green background black text heavier font and rounder corners</FlexibleButton>
When you need a variation that you didn't plan for in your style props, you can
still use the
<FlexibleButton ="dim pointer">A button that dims on hover and sets the cursor to 'pointer'</FlexibleButton>
A full starter UI Kit
Here's a proof-of-concept UI kit on CodeSandbox.
Use in Preact and other React-like libraries
Under the hood, nanostyled is built as a library-agnostic factory function. To use it in Preact without a compatibility layer, import the factory directly:
;;const nanostyled = ;const Button =;
nanostyled function takes two arguments:
- tag (String) - the name of an HTML element
- styleProps (Object) - an object that maps component props to CSS class names
const Paragraph =;
nanostyled returns a component, which will render styleProps into the
class attribute, and pass all other props directly to the rendered
element, with one exception:
You can use the special
as prop to change the HTML element rendered by a
nanostyled component. If, say, you've made a nanostyled
button, but you want
it to render as an
a tag sometimes, do this:
const Button = ;<Button>A button</Button><Button ="a">Looks like a button is a link</Button>
In a rudimentary benchmark (
test/benchmark.js), a nanostyled Button renders ~
2x more quickly than a similar Button built with styled-components.
In addition to rendering components more quickly, nanostyled is also almost two orders of magnitude smaller than styled-components over the wire:
|size (min + gzip)||0.4 kB||15.3 kB|
|3G download time||12ms||305ms|
When rendering on a server, just use nanostyled normally.
Nanostyled aims to run in any browser that implements ES5, including IE 9+. if you discover otherwise, please file an issue.
Please open an issue on Github.
PRs are welcome. Please include tests! See
test/nanostyled.test.js for the
format to follow.