Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including pure-styled-components with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. require("styled-components/package.json"); // styled-components is a peer dependency. require("styled-system/package.json"); // styled-system is a peer dependency. var pureStyledComponents = require("pure-styled-components")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

pure-styled-components v1.1.2

Styled Component design system based on Pure CSS for React/Preact

Pure.js Logo

Pure Components

Styled Component design system for React/Preact based on Pure CSS, a set of small, responsive CSS modules that you can use in every web project.

CSS with a minimal footprint.

Pure Components are ridiculously tiny. The entire set of modules clocks in at 90KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of JS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.

  • Minimal - Only the components you need. Extend easily with styles to customize.
  • Lightweight
  • Modular

Want to prototype a quick app? Or just need a quick grid? We've got you covered with simple, responsive components <Grid><Grid.Unit columns={[1/2,1/4]}>.


  • Base
  • Button
  • Form
  • Grid
  • Grid.Unit
  • Menu
  • Menu.Header
  • Menu.Item
  • Table

Check out the documentation here with each component, it's props, and examples on how to use them.


  • main - Pure CSS optimized
  • theming - Example on how to setup components for theming


This project primarily uses StorybookJS for development.

Quick Start

  1. git clone this project
  2. npm install
  3. npm run storybook or npm run dev

Building for Production

  1. npm run build

This runs 3 separate Babel build processes that generates code for:

  • Browser (CDN scripts) - /dist/
  • Node (CommonJS modules) - /module/
  • ES6 Modules (npm frontend code) - /lib/

You won't find these folder in this git repo, but you can generate them yourself by running the command above, or download them from a CDN like unpkg

Release on NPM

  1. Update
  2. Change version in package.json (per semver rules)
  3. Login to npm CLI
  4. Run npm run release


High Priority

  • Install semver to handle versioning

Low Priority

  • Multi-layered dropdown display with keyboard input
  • Tests
  • Extra pages (Layouts, Customize/Theming/Extend)



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free