Waffle Design System

Waffle Components

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


Getting Started

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

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.

Now we need to import our ThemeProvider into the app that we're using Blockstack UI with. The ThemeProvider creates a context scope for all of our components to use.

Using components

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

Injecting global styles

Sometimes you may need to apply css reset styles to your page. Blockstack UI exports a CSSReset that'll remove browser default styles. It's heavily inspired by Tailwind's preflight.


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

Waffle Design SystemBlockstack PBC