Back to Guides

Getting Started

Preshape is designed to rapidly build the basics of interfaces, with flexibility from a deliberately minimal design.


Standard install from the NPM repository using Yarn or NPM.
$ yarn add preshape


The components are designed with a flexible and composable API to handle common styling. But Instead of the components simply being a low level CSS interface, they provide a restricted set of values that direct the end result towards a consistent design.
Components and variables should be imported directly from the patternig library, similar to other React component libraries.
import {
} from 'preshape';

console.log(transitionTimeFast); // 200
console.log(themeDay.colorAccentShade1); // #4dabf7


Handling the CSS

Preshape uses standard CSS for it's styling and each component imports the required CSS that it needs. Your build system needs to have something to handle this.
For example using Webpack, the config might look like this...
module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader'],
  • Check out this project on Github