# npm
npm install @douyinfe/semi-ui

# yarn
yarn add @douyinfe/semi-ui

# pnpm
pnpm add @douyinfe/semi-ui

// main.tsx or index.tsx
// ⚠️ Must be imported at the top, before any Semi components
import '@douyinfe/semi-ui/react19-adapter';

import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

// App.tsx
import { Button, Toast, Modal, Notification } from '@douyinfe/semi-ui';

function App() {
    const showToast = () => {
        Toast.success('Operation successful!');
    };

    const showModal = () => {
        Modal.confirm({
            title: 'Confirm',
            content: 'Are you sure you want to proceed?',
        });
    };

    return (
        <div>
            <Button onClick={showToast}>Show Toast</Button>
            <Button onClick={showModal}>Show Modal</Button>
        </div>
    );
}

import { Button, Toast } from '@douyinfe/semi-ui';

function App() {
    return (
        <Button onClick={() => Toast.success('Hello Semi!')}>
            Click me
        </Button>
    );
}

// ❌ Class component as direct child of Tooltip may not position correctly
class MyComponent extends React.Component {
    render() {
        return <span {...this.props}>Content</span>;
    }
}

<Tooltip content="Tip">
    <MyComponent />
</Tooltip>

// ✅ Recommended: wrap with a DOM element
<Tooltip content="Tip">
    <span>
        <MyComponent />
    </span>
</Tooltip>

[Semi UI] createRoot is not available. 
If you are using React 19, please inject createRoot before using Semi components.
For details, see: https://semi.design/zh-CN/ecosystem/react19

import '@douyinfe/semi-ui/react19-adapter';

import { createRoot } from 'react-dom/client';
import semiGlobal from './_utils/semi-global';

semiGlobal.config.createRoot = createRoot;