Styled Component design system based on Pure CSS for React/Preact
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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)