# Addons

`nano-css` comes only with a single [`put()`](./put.md) addon pre-installed. However, it has
plenty more to chose from. Below is a list of addons shipped with `nano-css`.

- [`put()`](./put.md) — injects CSS styles given a selector
- [`rule()`](./rule.md) — injects CSS styles and returns a generated selector
- [`drule()`](./drule.md) — like `rule()`, but allows to add on-the-fly overrides
- [`sheet()`](./sheet.md) — collection of `rule()`s, lazy injects CSS styles only when used
- [`dsheet()`](./dsheet.md) — like `sheet()`, but allows to add on-the-fly overrides
- [`jsx()`](./jsx.md) — creates styling blocks for virtual DOM libraries
- [`useStyles()`](./useStyles.md) — adds `styles` as a second argument for your component
- [`withStyles()`](./withStyles.md) — injects `styles` prop into your component
- [`decorator`](./decorator.md) — provides `@css` decorator for styling stateful React components
- [`component`](./component.md) — provides React `Component` class to inherit from
- [`style()`](./style.md) — allows you to create *styled components*
- [`styled()()`](./styled.md) — better syntax for *styled components*
- [`hyperstyle()`](./hyperstyle.md) — creates styled hyperscript `h` function
- [`stable`](./stable.md) — generates consistent class names
- [`atoms`](./atoms.md) — CSS shorthands for better DX
- [`nesting`](./nesting.md) — better nesting features
- [`keyframes()`](./keyframes.md) — adds `@keyframes` support
- [`hydrate()`](./hydrate.md) — adds support for re-hydration on client side
- [`prefixer`](./prefixer.md) — auto-prefixes your styles with correct vendor prefixes
- [`stylis`](./stylis.md) — write CSS as strings
- [`unitless`](./unitless.md) — automatically adds `px` to styles
- [`!important`](./important.md) — adds `!important` to all declarations
- [`:global`](./global.md) — allows emitting global styles
- [`animate/*`](./animations.md) — collection of animation styles
- [`reset/*`](./resets.md) — collection of CSS resets
- [`reset-font`](./reset-font.md) — global styles for better font
- [`googleFont()`](./googleFont.md) — loads custom fonts from *Google Fonts*
- [`limit`](./limit.md) — limits server-side style sheet size
- [`amp`](./amp.md) — displays warnings and cleans up styles for AMP apps
- [`virtual`](./virtual.md) — virtual CSS renderer, splits css rules in atomic declarations
- [`spread`](./spread.md) — returns an object with data attributes used as a selector
- [`array`](./array.md) — use arrays to specify multiple values
- [`snake`](./snake.md) — chain styling rules
- [`tachyons`](./tachyons.md) — use Tachyons for rule chaining
- [`rtl`](./rtl.md) — flips all styles RTL (right-to-left)
- [`extract`](./extract.md) — allows extraction of CSS into external `*.css` style sheet
- [`sourcemaps`](./sourcemaps.md) — generates source maps in dev mode
- [`.units`](./units.md) — CSS units as JavaScript functions

## Addon Installation

All addons are in the `nano-css/addon/` folder and are exported
as an `addon` named export. Addon is simply a function that receives `nano-css` renderer object
as a single argument.

When these docs mention that you need to install an addon, say `xxx`, you simply import it
from the addon folder and apply to the nano renderer object:

```js
import {addon as addonXXX} from 'nano-css/addon/xxx';

addonXXX(nano);

nano.xxx(/* ... */);
```

Here we install [`rule()`](./rule.md) and [`atoms`](./atoms.md) addons:

```js
import {create} from 'nano-css';
import {addon as addonRule} from 'nano-css/addon/rule';
import {addon as addonAtoms} from 'nano-css/addon/atoms';

const nano = create();

addonRule(nano);
addonAtoms(nano);
```