Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton ResizeButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeRatingSearchSelectSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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'

or

<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 DemoDesign Tokens