Blockstack UI

The Blockstack design system, built with React and styled-system.

v2.12.1

Getting Started

First we need to install @blockstack/ui and its various dependencies.

yarn add @blockstack/ui styled-components babel-plugin-styled-components

Usage

Please note that you will need to have the styled-components babel plugin set up in your project in order to use the css prop.

To use any component from @blockstack/ui, we need to import the ThemeProvider into the root component of the app that will be using Blockstack UI. The ThemeProvider creates a React Context scope for all of our components to use.

// app.tsx
import
React
from
'react'
;
import
{
ThemeProvider
}
from
'@blockstack/ui'
;
<
ThemeProvider
>
{
children
}
</
ThemeProvider
>
;

Reset global styles

Typically you will want to apply a css reset to your page. @blockstack/ui exports a CSSReset that will reset and improve the browsers default styles. It's heavily inspired by Tailwind's preflight.

const
App
(
{
children
}
)
=>
{
return
(
<
ThemeProvider
>
<
CSSReset
/>
{
children
}
</
ThemeProvider
>
)
;
}

Using components

Simply import components by name from the @blockstack/ui package, as shown below.

import
{
Button
}
from
'@blockstack/ui'
;

Contributing

Please see our contribution guidelines to learn how you can contribute to this project.