# Onboarding

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/onboarding
*Captured:* 2026-04-27T14:58:24.110Z

Useful when you want to control a single tooltip that highlights a portion of the UI.

## Onboarding

## Single onboarding tip

### Example: Example 1

Reveal feature with onboarding tip Reset

#### React (tsx)

```tsx
import { useEffect, useState } from 'react';

import Button from '@rio-cloud/rio-uikit/Button';
import OnboardingTip from '@rio-cloud/rio-uikit/OnboardingTip';
import Divider from '@rio-cloud/rio-uikit/Divider';
import Fade from '@rio-cloud/rio-uikit/Fade';

export default () => {
    const [showFeature, setShowFeature] = useState(false);
    const [showTip, setShowTip] = useState(false);

    useEffect(() => {
        if (showFeature) {
            setTimeout(() => setShowTip(true), 1200);
        }
    }, [showFeature]);

    const handleReset = () => {
        setShowFeature(false);
        setShowTip(false);
    };

    return (
        <div>
            <div className='btn-toolbar'>
                <Button bsStyle='primary' onClick={() => setShowFeature(true)}>
                    Reveal feature with onboarding tip
                </Button>
                <Button variant='link' onClick={handleReset}>
                    Reset
                </Button>
            </div>
            <Divider />
            <div className='display-grid gap-25 grid-cols-3 gap-4'>
                <Fade show={showFeature}>
                    <div>
                        <OnboardingTip
                            show={showTip}
                            placement='top-start'
                            width={350}
                            title='Single onboarding example'
                            content='Welcome to the dashboard! This section provides an overview of your activity and important updates.'
                            onHide={() => setShowTip(false)}
                        >
                            <div
                                className='panel panel-default position-relative padding-20 text-center bg-white text-wrap-balance'
                                data-onboarding
                            >
                                <span className='rioglyph rioglyph-desktop text-size-h1 text-color-highlight' />
                                <h3 className='margin-top-5'>Dashboard</h3>
                                <p>See your key metrics and latest updates at a glance.</p>
                            </div>
                        </OnboardingTip>
                    </div>
                </Fade>
            </div>
        </div>
    );
};
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | The ID of the DOM element. |
| show | boolean | false | Indicates whether the onboarding tip is shown. |
| showCloseIcon | boolean | true | Defines whether to show a close icon. |
| textAlignment | TextAlignment | 'left' | Define how the text should be aligned. Possible values are: left center right |
| width | TooltipWidth | — | The tooltip's width. Possible values are: auto 100 150 200 250 300 350 400 450 500 |
| onHide | VoidFunction | () => {} | Callback function for when the component shall be hidden. |
| useInDialog | boolean | false | Changes the z-index. |
| className | string | — | Additional classes to be set on the wrapper element. |
| title | string \| ReactNode | — | The title of the onboarding tip. |
| content | string \| ReactNode | — | The content of the onboarding tip. |
| preventOverflow | boolean | true | Prevents onboarding tips from being cut off horizontally at screen borders. |
| popperConfig | PopperConfig | — | A Popper.js config object passed to the underlying popper instance. |
| placement | Placement | 'bottom' | Define how the component should be placed. Possible values are: auto-start auto auto-end top-start top top-end right-start right right-end bottom-start bottom bottom-end left-start left left-end |

## Onboarding tour

When you want to guide the user through a "tour" with multiple steps explaining individual features or UI elements. The behavior of the whole tour and individual steps can be controlled declaratively.

### Example: Notifications

Start walkthrough Reset

Notifications
Keep track of important alerts and messages.
Click here

#### React (tsx)

```tsx
import { useState, useEffect, type PropsWithChildren } from 'react';

import { useOnboardingTour, type OnboardingStep } from '@rio-cloud/rio-uikit/useOnboarding';
import Button from '@rio-cloud/rio-uikit/Button';
import Divider from '@rio-cloud/rio-uikit/Divider';

type PanelProps = {
    step?: string;
};

const Panel = ({ children, step }: PropsWithChildren<PanelProps>) => (
    <div
        data-onboarding-walkthrough-step={step}
        className='panel panel-default position-relative padding-20 text-center bg-white text-wrap-balance'
    >
        {children}
    </div>
);

const steps: OnboardingStep[] = [
    {
        element: '[data-onboarding-walkthrough-step="1"]',
        popover: {
            title: 'Animated tour example',
            description:
                'Welcome to the dashboard! This section provides an overview of your activity and important updates.',
            side: 'top',
            align: 'start',
            showButtons: [],
        },
    },
    {
        element: '[data-onboarding-walkthrough-step="2"]',
        disableActiveInteraction: true,
        popover: {
            title: 'Animated tour example',
            description: 'Here, you can find your recent notifications. Stay updated with real-time alerts!',
            side: 'top',
            align: 'start',
            showButtons: ['next'],
            nextBtnText: 'Next',
        },
    },
    {
        element: '[data-onboarding-walkthrough-step="3"]',
        popover: {
            title: 'Animated tour example',
            description: 'Here, you can find your recent notifications. Stay updated with real-time alerts!',
            side: 'top',
            align: 'start',
            showButtons: [],
        },
    },
    {
        element: '[data-onboarding-walkthrough-step="4"]',
        popover: {
            title: 'Animated tour example',
            description: 'Access your profile settings here. Customize your preferences and manage account details.',
            side: 'top',
            align: 'start',
            showButtons: ['next', 'close'],
            doneBtnText: 'Done',
        },
    },
];

export default () => {
    const [enableWalkthrough, setEnableWalkthrough] = useState(false);
    const [showContent2, setShowContent2] = useState(false);
    const [showContent3, setShowContent3] = useState(false);

    const { run, moveTo } = useOnboardingTour({ steps });

    const handleOnboarding = () => {
        setEnableWalkthrough(true);
        run();
    };

    const handleShowContent2 = () => setShowContent2(true);
    const handleShowContent3 = () => setShowContent3(true);

    const handleReset = () => {
        setEnableWalkthrough(false);
        setShowContent2(false);
        setShowContent3(false);
    };

    useEffect(() => {
        if (enableWalkthrough && showContent2) {
            moveTo(1);
        }
    }, [enableWalkthrough, showContent2]);

    useEffect(() => {
        if (enableWalkthrough && showContent3) {
            moveTo(3);
        }
    }, [enableWalkthrough, showContent3]);

    return (
        <div>
            <div className='btn-toolbar'>
                <Button bsStyle='primary' onClick={handleOnboarding}>
                    Start walkthrough
                </Button>
                <Button variant='link' onClick={handleReset}>
                    Reset
                </Button>
            </div>
            <Divider />
            <div className='display-grid gap-25 grid-cols-3 gap-4'>
                <Panel step='1'>
                    <span className='rioglyph rioglyph-notification text-size-h1 text-color-highlight' />
                    <h3 className='margin-top-5'>Notifications</h3>
                    <p>Keep track of important alerts and messages.</p>
                    <Button onClick={handleShowContent2}>Click here</Button>
                </Panel>
                {showContent2 && (
                    <>
                        <Panel step='2'>
                            <span className='rioglyph rioglyph-user text-size-h1 text-color-highlight' />
                            <h3 className='margin-top-5'>Profile Settings</h3>
                            <p>Manage your personal information and preferences.</p>
                        </Panel>

                        <Panel step='3'>
                            <span className='rioglyph rioglyph-clipboard text-size-h1 text-color-highlight' />
                            <h3 className='margin-top-5'>Project Tracker</h3>
                            <p>Monitor your ongoing projects and track deadlines.</p>
                            <Button onClick={handleShowContent3}>Click here</Button>
                        </Panel>
                    </>
                )}
                {showContent3 && (
                    <Panel step='4'>
                        <span className='rioglyph rioglyph-ok text-size-h1 text-color-highlight' />
                        <h3 className='margin-top-5'>Done</h3>
                        <p>You have reached the final feature</p>
                    </Panel>
                )}
            </div>
        </div>
    );
};
```

#### Props (json)

```json
'[data-onboarding-walkthrough-step="2"]'
```