Koala UI

Onboarding

The screen a new workspace opens on, ready to drop in. A welcome, a bar that counts every step, and the setup steps grouped into sections that open one at a time, each with its own action.

Variant 1

Pro

Built from#

The shell is the docked Layout the dashboards use, the same Sidebar and a sticky LayoutHeader with a Breadcrumb. The welcome is a PageHeader holding a labeled Progress. The sections are an Accordion in its separated variant, and the steps inside each one a second, minimal Accordion that keeps one step open at a time, with a Button for its action. The step marks borrow the look of the radio and the checkbox: an empty ring, the open step, a finished one.

Responsive#

Each preview renders inside an iframe, so the screen's breakpoints respond to the frame width. The guide is one reading column at every size, so a phone shows the same screen with narrower margins. Below lg the rail moves into the drawer behind the mobile bar and the section descriptions wrap under their titles.

FAQ#

Each step's button marks it done here so the preview can be played through. Point it at the page or dialog that does the work instead, and add the step's id to the finished list when that flow reports back. The bar, the count and every section's share are derived from that one list.