Skip to content
Bitcoin Builder Kit

UI Package Overview

UI Package

Section titled “UI Package”

The Bitcoin Builder Kit UI package provides a UI system for building consistent looking UIs for your bitcoin products. While some components are bitcoin-specific, some are more generic and applicable to a wide variety of applications.

Th UI package uses web components, which should be compatible with most modern web frameworks. However, there are also React-wrapped components for React projects.

This site provides documentation on how to install and use these components. Optionally, there is also a storybook where you can explore the different component possibilities more deeply.

Getting Started

Section titled “Getting Started”

First install the UI package:

Terminal window
pnpm add @sbddesign/bui-ui

Next, setup the appropriate theming in your project. You will do this by applying a data-theme and data-mode attribute in your HTML.

The data-mode can be light or dark. The data-theme can be bitcoindesign or conduit. Learn more about themes in Tokens.

<!doctype html>
<html lang="en">
  <head>
    <!-- head content -->
  </head>
  <body data-theme="bitcoindesign" data-mode="light">
    <!-- your app goes here -->
  </body>
</html>

Import the CSS so that the componenets have appropriate styling. Typically, you will do this only once, at a higher level part of your app (e.g. main.js, App.tsx, etc.)

import '@sbddesign/bui-ui/tokens.css'

Next, import a component to use in your app.

import '@sbddesign/bui-ui/button.js'

Finally, display the component in your app.

<bui-button label="Receive Bitcoin"></bui-button>
<bui-button label="Send Bitcoin" style-type="outline"></bui-button>

Live Example

Section titled “Live Example”

Here’s a working example of the button component: