Need help with lemon-reset?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

131 Stars 11 Forks MIT License 86 Commits 3 Opened issues


Consistent, cross-browser React DOM tags, powered by CSS Modules. 🍋

Services available


Need anything else?

Contributors list

🍋 Lemon Reset

npm Build Status gzip size install size

A set of React components that provide Meyer Reset styles for use with CSS Modules.

For all the DOM tags used in Meyer Reset, Lemon Reset provides a React component with those reset styles, minimizing the effect of browser quirks. In a React world, we prefer components that are self-contained and not reliant on global styling.

Read more about the motivation behind Lemon Reset in our blog post!


yarn add lemon-reset


Use these components as a drop in replacement for your existing HTML tags!

import { P } from 'lemon-reset';


Hello World

, myContainer);

Wrap Lemon Reset components in your own custom components!

import { Span, Div } from 'lemon-reset';
import styles from './Container.css';

type Props = { display: 'inline' | 'inline-block' | 'block' | 'none', };

const Container = ({ children, display }: Props) => { const Tag = display === 'inline' ? Span : Div; const classes = styles[display--${display}];

return <tag classname="{classes}">{children}</tag>;


export default Container;

Pass in any props! If you need to pass in a ref, you'll need to pass it in as a tagRef:

 console.log(span)}>This has a ref


Our makefile assumes that you have virtualenv available globally, as we use a python environment for running pre-commit.

If you have virtualenv, simply run:

make build

Otherwise, you can do:

NODE_ENV=production yarn babel src --out-dir lib --copy-files

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.