lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow 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 DemoThemes