Preshape

A minimal design system and library of composable React components.
npm version

Colors

A minimal set of colors to provide clear contrast across the Day and Night themes. All colors are from the optimised open source Open Color scheme.
Unshuffle
#0ca678
Positive (Shade 3)
--color-positive--shade-3
colorPositiveShade3
#e9ecef
Light (Shade 3)
--color-light--shade-3
colorLightShade3
#1E1B18
Black
--color-black
colorBlack
#d6336c
Negative (Shade 3)
--color-negative--shade-3
colorNegativeShade3
#4c6ef5
Accent 1 (Shade 2)
--color-accent--shade-2
colorAccent1Shade2
#f1f3f5
Light (Shade 2)
--color-light--shade-2
colorLightShade2
#5c7cfa
Accent 1 (Shade 1)
--color-accent--shade-1
colorAccent1Shade1
#495057
Dark (Shade 3)
--color-dark--shade-3
colorDarkShade3
#343a40
Dark (Shade 2)
--color-dark--shade-2
colorDarkShade2
#ffec99
Highlight
--color-highlight
colorHighlight
#212529
Dark (Shade 1)
--color-dark--shade-1
colorDarkShade1
#20c997
Positive (Shade 1)
--color-positive--shade-1
colorPositiveShade1
#12b886
Positive (Shade 2)
--color-positive--shade-2
colorPositiveShade2
#f06595
Negative (Shade 1)
--color-negative--shade-1
colorNegativeShade1
#ae3ec9
Accent 2 (Shade 3)
--color-accent--shade-3
colorAccent2Shade3
#cc5de8
Accent 2 (Shade 1)
--color-accent--shade-1
colorAccent2Shade1
#FFFEFC
White
--color-white
colorWhite
#4263eb
Accent 1 (Shade 3)
--color-accent--shade-3
colorAccent1Shade3
#be4bdb
Accent 2 (Shade 2)
--color-accent--shade-2
colorAccent2Shade2
#e64980
Negative (Shade 2)
--color-negative--shade-2
colorNegativeShade2
#f8f9fa
Light (Shade 1)
--color-light--shade-1
colorLightShade1

Sizing

The sizing and spacing of a UI defines section relationships and can instantly affect how an UI is received. Too little space and a UI can feel cluttered and chaotic, too much space and it can feel empty or unrelated.
GeneralCSS
x1
var(--size--x1)
x2
var(--size--x2)
x3
var(--size--x3)
x4
var(--size--x4)
x6
var(--size--x6)
x8
var(--size--x8)
x10
var(--size--x10)
x12
var(--size--x12)
x16
var(--size--x16)
BorderCSS
x1
var(--border-size--x1)
x2
var(--border-size--x2)

Icons

A selected set of icons from the Feather Icon set, designed with an emphasis on simplicity, consistency, and flexibility. All can be used with the Icon component.

Backward

Beginning

Book

ChevronDown

ChevronLeft

ChevronRight

ChevronUp

Circle

Cloud

Code

Cog

Command

Copy

Cross

Delete

End

Error

ExternalLink

Eye

File

Forward

Github

Hexagon

Info

Layers

Letter

LinkedIn

Maximize

Menu

Minimize

Moon

Pause

Pencil

Play

QuestionMark

Redo

Refresh

Save

Shuffle

Square

Star

Sun

Terminal

Triangle

Twitter

Undo

Water

Components

A collection of React Components to provide the building blocks for UIs.
Alert
An alerting component for bringing attention to a message.
Appear
Using framer-motion, the Appear component provides a variety of ways to make parts of the UI appear in style.
Base
The core component that is the end of the chain for all other components. It provides general utility behaviour and styling.
BlockQuote
A component to indicate that the contents is an extended quotation, by visually indenting and styling.
BulletPoints
A vertical list component for listing your todos, ordered and chaos modes included.
Button
A standard clickable button with a variety of uses to trigger some sort of action.
CheckBox
Standard toggling checkbox input for selecting multiple choices.
Code
A syntax highlighting code block component.
Editor
A code editor component powered by Ace Editor.
Flex
Simple, all purpose flexing component to achieve common UI layouts and placements.
Grid
A use case driven grid system (using display: grid;) for auto flowing, flexible and fixed column layouts.
Icon
Icons to give more visual meaning to text. Icons are selected from the Feather Icon set.
Input
Standard single line text input for data collection.
Labels
Keyword highlighting component, useful for giving specific data emphasis.
Link
React Router compatible links (when provided with a "to" destination).
List
Inline listing component, useful for separating out UI actions and a short list of options.
Modal
A multi purpose Modal component that can be used to overly any content over the main UI.
Placement
A powerful set of components for placing contents around reference nodes. Uses the awesome PopperJS positioning engine.
Options
A multi-selection list component that can be used inline or as a dropdown.
RadioButton
Standard toggling radio input for selecting single choices.
Range
A slider control for selecting a number between a given min and max number.
Tabs
Tab organisational components, useful for laying out related but nonconcurrent parts of the UI.
Table
Standard table layout components. Useful for presenting, comparing and sorting raw tabular data
Text
The core component for styling text. Instead of specifying various elements, a suitable and semantic element will be determined from the props.
TextArea
Standard multi line textarea input for data collection.