bPanel

bPanel

  • Getting Started
  • About
  • Developers
  • Showcase

›bPanel UI

Plugin Development

  • Intro to Plugin Development
  • Blockchain API

Guides

  • Node Info View

API

  • metadata
  • decorate
  • mapComponentState/Dispatch
  • getProps
  • reducers
  • middleware
  • Constants
  • Sockets
  • Decorate Plugins
  • Bundling Plugins
  • bPanel Utils

bPanel UI

  • Introduction
  • Components
  • Utilities

Theming (Skins)

  • Getting Started
  • Theming Defaults
  • Theming Variables

UI Components

The easiest way to learn about and experiment with bPanel UI components is through the demo plugin BUI bPanel. This plugin adds a view to your bPanel install that demonstrates the use of all available components in the bPanel UI library.

Consistent Styling

The best part about using bPanel UI components in your plugin views is that they will automatically reflect updates to your active theme. Since all components are connected to the themeVariables and themeConfig via the connectTheme HOC, if you change your app's theme, the changes will be reflected in the component. These can even be extended via theme prop if you want.

Get Started with BUI

Try it out for yourself!

npm install --save @bpanel/bui

Add BUI to your bPanel install to see what's available.

// ~/.bpanel/config.js
export const localPlugins = [];
export const plugins = ['@bpanel/bui'];
export default { localPlugins, plugins };

Using components is as easy as:

npm install @bpanel/bpanel-ui
import { Text, Header } from '@bpanel/bpanel-ui';

export default () => (
  <div>
    <Header type="h2">Hello World</Header>
  </div>
);
← IntroductionUtilities →
bPanel
Docs
Quick StartPlugin OverviewTheming Overview
Community
Stack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2019 bcoin
Icons made by artists from https://www.flaticon.com/authors and licensed under CC 3.0