Learn BLUEPRINT-JS with Real Code Examples

import React, { useState } from 'react';
import { Button, Card, Elevation, H2 } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';

const Counter = () => {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);

    return (
        <div className={isDark ? 'bp3-dark' : ''} style={{ display: 'flex', justifyContent: 'center', marginTop: '50px' }}>
        <Card elevation={Elevation.TWO} style={{ padding: '20px', textAlign: 'center' }}>
        <H2>Counter: {count}</H2>
        <Button intent='primary' onClick={() => setCount(count + 1)} style={{ margin: '5px' }}>+</Button>
        <Button intent='danger' onClick={() => setCount(count - 1)} style={{ margin: '5px' }}>-</Button>
        <Button onClick={() => setCount(0)} style={{ margin: '5px' }}>Reset</Button>
        <br /><br />
        <Button intent='warning' onClick={() => setIsDark(!isDark)}>Switch Theme</Button>
        </Card>
        </div>
    );
};

export default Counter;

Demonstrates a simple counter layout using Blueprint.js components and React for interactivity.

import React from 'react';
import { Button, H2 } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';

const ButtonExample = () => (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
        <H2>Blueprint.js Buttons</H2>
        <Button intent='primary' style={{ margin: '5px' }}>Primary</Button>
        <Button intent='success' style={{ margin: '5px' }}>Success</Button>
        <Button intent='danger' style={{ margin: '5px' }}>Danger</Button>
        <Button minimal style={{ margin: '5px' }}>Minimal</Button>
    </div>
);

export default ButtonExample;

Shows different Blueprint.js button types and intents.

import React from 'react';
import { Card, Elevation, H2, Button } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';

const CardExample = () => (
    <div style={{ display: 'flex', justifyContent: 'center', marginTop: '50px' }}>
        <Card elevation={Elevation.THREE} style={{ padding: '20px', textAlign: 'center' }}>
        <H2>Card Title</H2>
        <p>This is a simple Blueprint.js card example.</p>
        <Button intent='primary'>Action</Button>
        </Card>
    </div>
);

export default CardExample;

Displays a simple card with elevation and content using Blueprint.js.

import React, { useState } from 'react';
import { Button, Dialog, Classes } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';

const DialogExample = () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
        <div style={{ textAlign: 'center', marginTop: '50px' }}>
        <Button intent='primary' onClick={() => setIsOpen(true)}>Open Dialog</Button>
        <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} title='Blueprint.js Dialog'>
        <div className={Classes.DIALOG_BODY}>This is a dialog example.</div>
        <div className={Classes.DIALOG_FOOTER}>
        <Button onClick={() => setIsOpen(false)}>Close</Button>
        </div>
        </Dialog>
        </div>
    );
};

export default DialogExample;

Shows opening and closing a modal dialog using Blueprint.js Dialog component.

import React from 'react';
import { Navbar, Alignment, Button } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';

const NavbarExample = () => (
    <Navbar>
        <Navbar.Group align={Alignment.LEFT}>
        <Navbar.Heading>Blueprint Navbar</Navbar.Heading>
        </Navbar.Group>
        <Navbar.Group align={Alignment.RIGHT}>
        <Button minimal>Home</Button>
        <Button minimal>About</Button>
        </Navbar.Group>
    </Navbar>
);

export default NavbarExample;

Demonstrates a simple navbar using Blueprint.js Navbar component.

import React, { useState } from 'react';
import { Tabs, Tab, H2 } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';

const TabsExample = () => {
    const [selectedTab, setSelectedTab] = useState('tab1');
    return (
        <div style={{ textAlign: 'center', marginTop: '50px' }}>
        <H2>Blueprint Tabs</H2>
        <Tabs id='TabsExample' selectedTabId={selectedTab} onChange={setSelectedTab} renderActiveTabPanelOnly>
        <Tab id='tab1' title='Tab 1' panel={<div>Content of Tab 1</div>} />
        <Tab id='tab2' title='Tab 2' panel={<div>Content of Tab 2</div>} />
        <Tab id='tab3' title='Tab 3' panel={<div>Content of Tab 3</div>} />
        </Tabs>
        </div>
    );
};

export default TabsExample;

Shows tab navigation using Blueprint.js Tabs component.

import React from 'react';
import { FormGroup, InputGroup, Button } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';

const FormExample = () => (
    <div style={{ maxWidth: '400px', margin: '50px auto' }}>
        <FormGroup label='Name' labelFor='name-input'>
        <InputGroup id='name-input' placeholder='Enter your name' />
        </FormGroup>
        <FormGroup label='Email' labelFor='email-input'>
        <InputGroup id='email-input' placeholder='Enter your email' />
        </FormGroup>
        <Button intent='primary'>Submit</Button>
    </div>
);

export default FormExample;

Shows a simple form layout using Blueprint.js FormGroup and InputGroup.

import React from 'react';
import { Callout } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';

const AlertExample = () => (
    <div style={{ maxWidth: '400px', margin: '50px auto' }}>
        <Callout intent='success' title='Success'>This is a success alert.</Callout>
        <Callout intent='danger' title='Error' style={{ marginTop: '10px' }}>This is an error alert.</Callout>
    </div>
);

export default AlertExample;

Displays a simple alert message using Blueprint.js Callout component.

import React, { useState, useEffect } from 'react';
import { ProgressBar } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';

const ProgressExample = () => {
    const [value, setValue] = useState(0);
    useEffect(() => { const interval = setInterval(() => setValue(v => (v >= 100 ? 0 : v + 10)), 1000); return () => clearInterval(interval); }, []);
    return (
        <div style={{ maxWidth: '400px', margin: '50px auto' }}>
        <ProgressBar value={value} animate />
        </div>
    );
};

export default ProgressExample;

Shows a progress bar using Blueprint.js ProgressBar component.