Waffle Design System

System props

All of the components in Blockstack UI are built with styled-components and implement styled-system. With this, you can pass css attributes to any component as props. Check out the page further reading to dig deeper.

System props reference

See below for the various props and aliases you can pass for styling components. You can see the full spec on the Styled System docs.

Margin & padding

PropCSS PropertyTheme Key
m, marginmarginspace
mt, marginTopmargin-topspace
mr, marginRightmargin-rightspace
mb, marginBottommargin-bottomspace
ml, marginLeftmargin-leftspace
mxmargin-left and margin-rightspace
mymargin-top and margin-bottomspace
p, paddingpaddingspace
pt, paddingToppadding-topspace
pr, paddingRightpadding-rightspace
pb, paddingBottompadding-bottomspace
pl, paddingLeftpadding-leftspace
pxpadding-left and padding-rightspace
pypadding-top and padding-bottomspace

Color & background color

PropCSS PropertyTheme Key
colorcolorcolors
bg, backgroundColorbackground-colorcolors
opacityopacitynone

Typography

PropCSS PropertyTheme Key
fontFamilyfont-familyfonts
fontSizefont-sizefontSizes
fontWeightfont-weightfontWeights
lineHeightline-heightlineHeights
letterSpacingletter-spacingletterSpacings
textAligntext-alignnone
fontStylefont-stylenone
textTransformtext-transformnone
textDecorationtext-decorationnone

Layout, width and height

PropCSS PropertyTheme Key
w, widthwidthsizes
h, heightheightsizes
minW, minWidthmin-widthsizes
maxW, maxWidthmax-widthsizes
minH, minHeightmin-heightsizes
maxH, maxHeightmax-heightsizes
d, displaydisplaynone
sizewidth heightsizes
verticalAlignvertical-alignnone
overflowoverflownone
overflowXoverflowXnone
overflowYoverflowYnone

Flexbox

Note: Props in * will only work if you use the Flex component.

PropCSS PropertyTheme Key
alignItems, *alignalign-itemsnone
alignContentalign-contentnone
justifyItemsjustify-itemsnone
justifyContent, *justifyjustify-contentnone
flexWrap, *wrapflex-wrapnone
flexDirection, flexDir, *directionflex-directionnone
flexflex (shorthand)none
flexGrowflex-grownone
flexShrinkflex-shrinknone
flexBasisflex-basisnone
justifySelfjustify-selfnone
alignSelfalign-selfnone
orderordernone

Grid Layout

Note: Props in * will only work if you use the Grid component.

PropCSS PropertyTheme Key
gridGap, *gapgrid-gapspace
gridRowGap, *rowGapgrid-row-gapspace
gridColumnGap, *columnGapgrid-column-gapspace
gridColumn, *columngrid-columnnone
gridRow, *rowgrid-rownone
gridArea, *areagrid-areanone
gridAutoFlow, *autoFlowgrid-auto-flownone
gridAutoRows, *autoRowsgrid-auto-rowsnone
gridAutoColumns, *autoColumnsgrid-auto-columnsnone
gridTemplateRows, *templateRowsgrid-template-rowsnone
gridTemplateColumns, *templateColumnsgrid-template-columnsnone
gridTemplateAreas, *templateAreasgrid-template-areasnone

Background

PropCSS PropertyTheme Key
backgroundbackgroundnone
bgImg, backgroundImagebackground-imagenone
bgSize, backgroundSizebackground-sizenone
bgPos,backgroundPositionbackground-positionnone
bgRepeat,backgroundRepeatbackground-repeatnone
bgAttachment,backgroundAttachmentbackground-attachmentnone

Borders

PropCSS PropertyTheme Field
borderborderborders
borderWidthborder-widthborderWidths
borderStyleborder-styleborderStyles
borderColorborder-colorcolors
borderTopborder-topborders
borderTopWidthborder-top-widthborderWidths
borderTopStyleborder-top-styleborderStyles
borderTopColorborder-top-colorcolors
borderRightborder-rightborders
borderRightWidthborder-right-widthborderWidths
borderRightStyleborder-right-styleborderStyles
borderRightColorborder-right-colorcolors
borderBottomborder-bottomborders
borderBottomWidthborder-bottom-widthborderWidths
borderBottomStyleborder-bottom-styleborderStyles
borderBottomColorborder-bottom-colorcolors
borderLeftborder-leftborders
borderLeftWidthborder-left-widthborderWidths
borderLeftStyleborder-left-styleborderStyles
borderLeftColorborder-left-colorcolors
borderXborder-left & border-rightborders
borderYborder-top & border-bottomborders

Border Radius

PropCSS PropertyTheme Field
rounded, borderRadiusborder-radiusradii
roundedTopLeft, borderTopLeftRadiusborder-top-left-radiusradii
roundedTopRight, borderTopRightRadiusborder-top-right-radiusradii
roundedBottomRight, borderBottomRightRadiusborder-bottom-right-radiusradii
roundedBottomLeft, borderBottomLeftRadiusborder-bottom-left-radiusradii
roundedTopborder-top-left-radius & border-top-right-radiusradii
roundedRightborder-top-right-radius & border-bottom-right-radiusradii
roundedBottomborder-bottom-left-radius & border-bottom-right-radiusradii
roundedLeftborder-top-left-radius & border-bottom-left-radiusradii

Position

PropCSS PropertyTheme Field
pos,positionpositionnone
zIndexz-indexzIndices
toptopspace
rightrightspace
bottombottomspace
leftleftspace

Shadow

PropCSS PropertyTheme Field
textShadowtext-shadowshadows
shadow,boxShadowbox-shadowshadows

Other Props

Asides all the common system props listed above, all component will accept the following props:

PropCSS PropertyTheme Field
animationanimationnone
appearanceappearancenone
transformtransformnone
transformOrigintransform-originnone
visibilityvisibilitynone
whiteSpacewhite-spacenone
userSelectuser-selectnone
pointerEventspointer-eventsnone
wordBreakword-breaknone
overflowWrapoverflow-wrapnone
textOverflowtext-overflownone
boxSizingbox-sizingnone
cursorcursornone
resizeresizenone
transitiontransitionnone
objectFitobject-fitnone
objectPositionobject-positionnone
objectPositionobject-positionnone
fillfillcolors
strokestrokecolors
outlineoutlinenone

The as prop

The as prop is a feature that all of our components get from styled-components. It allows you to pass a HTML tag or another component to a Blockstack UI component to be rendered as the base tag of that component along with all it's styles and props.

For example, say you are using a Button component, and you need to make it a link instead. You can compose a and Button like this:

Editable Example

This allows you to use all of the Button props and all of the <a> props without having to wrap the Button in an a component.

Note: this does have some limitations.

Let's say you wanted the button to take styles from a Flex primitive. You'd do the following:

Editable Example

The issue with this, though, is the Button no long renders as a button DOM element. It will be rendered as a div because Flex by default renders as a div.

For these reasons, it's recommended only to use the as prop when you cannot achieve the same result by nesting components. The Flex / Button example could be done like so:

Editable Example

or

Editable Example
Waffle Design SystemBlockstack PBC