Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »


1.1.2 • Public • Published

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)



npm i pure-styled-components

Downloadsweekly downloads









last publish


  • avatar
Report a vulnerability