Getting Started

Installation

Blueprint UI components are built as Web Components. This enables them to work in a variety of frameworks and libraries. Blueprint UI is split into several packages that can be used independently. To use components install the following,

npm install @blueprintui/components

npm install @blueprintui/layout @blueprintui/typography // optional utilities

CSS

To use components the base theme CSS file must be loaded into the page. This can be done via a CSS import or HTML link.

@import '@blueprintui/themes/index.min.css'

<link rel="stylesheet" href="@blueprintui/themes/index.min.css">

JavaScript

Once the tokens CSS is loaded components can be imported via JavaScript imports.

import '@blueprintui/components/include/alert.js';

HTML

<bp-alert status="success">hello there!</bp-alert>

hello there!

CDN

Blueprint UI Components can be used via CDNs for fast and easy prototyping.

<link rel="stylesheet" href="https://unpkg.com/@blueprintui/themes/index.min.css">

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/alert.js/+esm';
</script>

CDN Demo

Design Tokens