Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups


Demo React
Due to React's incompatibility to stadard Web APIs and additonal shim library is required

To use BlueprintUI in React be sure to follow the getting started guide and installation. Using the @lit-labs/react library will enable React wrapper components to bridge the gap between React and native custom elements.

import * as React from 'react';
import { createComponent } from '@lit-labs/react';

export const BpButton = createComponent({ tagName: 'bp-button', elementClass: Button, react: React });

<BpButton>hello there</BpButton>

Once the component is created it can be exported and used througout your application.

import * as React from 'react';
import { createComponent } from '@lit-labs/react';
import { BpButton as Button } from '@blueprintui/components/button';
import { BpAlert as Alert, BpAlertGroup as AlertGroup } from '@blueprintui/components/alert';
import '@blueprintui/components/include/alert.js';
import '@blueprintui/components/include/button.js';

export const BpButton = createComponent({ tagName: 'bp-button', elementClass: Button, react: React });
export const BpAlertGroup = createComponent({ tagName: 'bp-alert-group', elementClass: AlertGroup, react: React });
export const BpAlert = createComponent({ tagName: 'bp-alert', elementClass: Alert, react: React, events: { onClose: 'close' } });

export default function App() {
const [showAlert, setShowAlert] = React.useState(false);

return (
<div bp-layout="block gap:md">
<BpButton onClick={() => setShowAlert(!showAlert)}>hello there</BpButton>

{showAlert ? (
<BpAlertGroup status="success" hidden={!showAlert}>
<BpAlert closable onClose={() => setShowAlert(false)}>General Kenobi...</BpAlert>
) : null}