Onboarding

Guide users through multi-step flows.

Core Examples

Accessible React components with Base UI and Yumma CSS.

Standard implementation with default configuration.

Requires completing task items within each step before advancing.

Navigates between steps using dot indicators.

Draws a thin progress bar that fills across the top as steps are completed.

Icon-only buttons and decorative configurations.

Shapes from sharp to fully rounded.

Applies sharp corners with no br-(value).

Applies a smooth continuous curve between adjacent corners.

Additional variants and interactive states.

Includes a close button at the top-left corner with dot navigation.

Renders without motion wrappers or interactive animations.