react_boost_ui_provider_setup_with_custom_theme_button.ts

1import React from 'react';
2import ReactDOM from 'react-dom';
3import { BoostProvider, Button, createTheme } from '@boost-ui/core';
4
5// 1. Create a custom theme (optional, defaults are provided)
6const theme = createTheme({
7  palette: {
8    primary: {
9      main: '#007bff',
10    },
11  },
12});
13
14const App: React.FC = () => {
15  return (
16    // 2. Wrap your application in the BoostProvider
17    <BoostProvider theme={theme}>
18      <div style={{ padding: '20px' }}>
19        <h1>Hello Boost UI</h1>
20        {/* 3. Use Boost UI components */}
21        <Button variant="contained" color="primary" onClick={() => alert('Boosted!')}>
22          Quickstart Button
23        </Button>
24      </div>
25    </BoostProvider>
26  );
27};
28
29ReactDOM.render(<App />, document.getElementById('root'));