Preshape

A minimal design system and library of composable React components.

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
#495057
Dark (Shade 3)
--color-dark--shade-3
colorDarkShade3
#4263eb
Accent 1 (Shade 3)
--color-accent--shade-3
colorAccent1Shade3
#343a40
Dark (Shade 2)
--color-dark--shade-2
colorDarkShade2
#5c7cfa
Accent 1 (Shade 1)
--color-accent--shade-1
colorAccent1Shade1
#212529
Dark (Shade 1)
--color-dark--shade-1
colorDarkShade1
#12b886
Positive (Shade 2)
--color-positive--shade-2
colorPositiveShade2
#e9ecef
Light (Shade 3)
--color-light--shade-3
colorLightShade3
#cc5de8
Accent 2 (Shade 1)
--color-accent--shade-1
colorAccent2Shade1
#f1f3f5
Light (Shade 2)
--color-light--shade-2
colorLightShade2
#f8f9fa
Light (Shade 1)
--color-light--shade-1
colorLightShade1
#4c6ef5
Accent 1 (Shade 2)
--color-accent--shade-2
colorAccent1Shade2
#d6336c
Negative (Shade 3)
--color-negative--shade-3
colorNegativeShade3
#ae3ec9
Accent 2 (Shade 3)
--color-accent--shade-3
colorAccent2Shade3
#f06595
Negative (Shade 1)
--color-negative--shade-1
colorNegativeShade1
#0ca678
Positive (Shade 3)
--color-positive--shade-3
colorPositiveShade3
#e64980
Negative (Shade 2)
--color-negative--shade-2
colorNegativeShade2
#1E1B18
Black
--color-black
colorBlack
#ffec99
Highlight
--color-highlight
colorHighlight
#FFFEFC
White
--color-white
colorWhite
#20c997
Positive (Shade 1)
--color-positive--shade-1
colorPositiveShade1
#be4bdb
Accent 2 (Shade 2)
--color-accent--shade-2
colorAccent2Shade2

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.
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.