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.
Black
#1E1B18
var(--color-black)
colorBlack
White
#FFFEFC
var(--color-white)
colorWhite
Highlight
#ffec99
var(--color-highlight)
colorHighlight
Dark (Shade 1)
#212529
var(--color-dark--shade-1)
colorDarkShade1
Dark (Shade 2)
#343a40
var(--color-dark--shade-2)
colorDarkShade2
Dark (Shade 3)
#495057
var(--color-dark--shade-3)
colorDarkShade3
Light (Shade 1)
#f8f9fa
var(--color-light--shade-1)
colorLightShade1
Light (Shade 2)
#f1f3f5
var(--color-light--shade-2)
colorLightShade2
Light (Shade 3)
#e9ecef
var(--color-light--shade-3)
colorLightShade3
Accent 1 (Shade 1)
rgba(66, 99, 235, 0.1)
var(--color-accent--shade-1)
colorAccent1Shade1
Accent 1 (Shade 2)
rgba(66, 99, 235, 0.2)
var(--color-accent--shade-2)
colorAccent1Shade2
Accent 1 (Shade 3)
#5c7cfa
var(--color-accent--shade-3)
colorAccent1Shade3
Accent 1 (Shade 4)
#4c6ef5
var(--color-accent--shade-4)
colorAccent1Shade4
Accent 1 (Shade 5)
#4263eb
var(--color-accent--shade-5)
colorAccent1Shade5
Accent 2 (Shade 1)
rgba(112, 72, 232, 0.1)
var(--color-accent--shade-1)
colorAccent2Shade1
Accent 2 (Shade 2)
rgba(112, 72, 232, 0.2)
var(--color-accent--shade-2)
colorAccent2Shade2
Accent 2 (Shade 3)
#845ef7
var(--color-accent--shade-3)
colorAccent2Shade3
Accent 2 (Shade 4)
#7950f2
var(--color-accent--shade-4)
colorAccent2Shade4
Accent 2 (Shade 5)
#7048e8
var(--color-accent--shade-5)
colorAccent2Shade5
Positive (Shade 1)
rgba(12, 166, 120, 0.1)
var(--color-positive--shade-1)
colorPositiveShade1
Positive (Shade 2)
rgba(12, 166, 120, 0.2)
var(--color-positive--shade-2)
colorPositiveShade2
Positive (Shade 3)
#20c997
var(--color-positive--shade-3)
colorPositiveShade3
Positive (Shade 4)
#12b886
var(--color-positive--shade-4)
colorPositiveShade4
Positive (Shade 5)
#0ca678
var(--color-positive--shade-5)
colorPositiveShade5
Negative (Shade 1)
rgba(214, 51, 108, 0.1)
var(--color-negative--shade-1)
colorNegativeShade1
Negative (Shade 2)
rgba(214, 51, 108, 0.2)
var(--color-negative--shade-2)
colorNegativeShade2
Negative (Shade 3)
#f06595
var(--color-negative--shade-3)
colorNegativeShade3
Negative (Shade 4)
#e64980
var(--color-negative--shade-4)
colorNegativeShade4
Negative (Shade 5)
#d6336c
var(--color-negative--shade-5)
colorNegativeShade5
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)
x3
var(--border-size--x3)
Border RadiusCSS
x1
var(--border-radius-size--x1)
x2
var(--border-radius-size--x2)
x3
var(--border-radius-size--x3)
Icons
Icons from the Feather Icon set, designed with an emphasis on simplicity, consistency, and flexibility. All can be used like <Icons.Activity />.
Activity
Airplay
AlertCircle
AlertOctagon
AlertTriangle
AlignCenter
AlignJustify
AlignLeft
AlignRight
Anchor
Aperture
Archive
ArrowDownCircle
ArrowDownLeft
ArrowDownRight
ArrowDown
ArrowLeftCircle
ArrowLeft
ArrowRightCircle
ArrowRight
ArrowUpCircle
ArrowUpLeft
ArrowUpRight
ArrowUp
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.
Box
The core component that is the end of the chain for all other components. It provides general utility behaviour, flexing 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.
Form
Form component with added abilities to communicate field-by-field error pattern through context.
Grid
A use case driven grid system (using display: grid;) for auto flowing, flexible and fixed column layouts.
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.
Toggle
An on/off styled toggle switch indicator