Documentation

OnboardUI Docs

Everything you need to design, preview, and export your onboarding flows.

Quick Start

Go from zero to exported code in under five minutes.

1

Create a project

From the dashboard, click New Project. Give it a name - this becomes the filename of your exported code (e.g. my-app.dart).

2

Add screens

Use the screen list in the left panel to add screens to your flow. Each screen is a separate page in the final onboarding sequence.

3

Build your layout

Click any component in the palette to add it to the active screen. Drag to reorder. Select a component to edit its properties in the right panel.

4

Preview

Hit Preview (top right) to see your full animated flow play out in a simulated phone - exactly what your users will see.

5

Export

Hit Export and choose View Code to copy the generated source, or push directly to a GitHub repo (Enterprise plan).

Component Reference

Every component available in the builder palette.

Title

Large heading text with bold, italic, and colour formatting.

Subtitle

Body text with rich formatting and adjustable line height.

Image

Full-width or percentage-width image. Use shrink-to-fit for logos or illustrations.

Primary Button

Main call-to-action. Customise label, colours, and corner radius.

Secondary Button

Softer CTA in ghost/outline style.

Skip Text

A small skip link for users who want to bypass onboarding.

Pagination Dots

Progress indicators showing which screen the user is on.

Feature Row

Icon + heading + subtitle row for listing product benefits.

Question Choice

Selectable card for surveys or personalisation questions.

Slider

Progress or rating slider. Supports linear, circular, and emoji variants.

Divider

Horizontal rule for visual separation between sections.

Background

Sets the screen background - solid colour or an uploaded image.

Exporting & Integration

How to take your design into a real codebase.

FlutterCopy and paste

1.In the builder, click Export (top right) then open the View Code tab.
2.Copy the generated Dart code.
3.Paste it into your Flutter project under lib/ - the filename matches your project name.
4.Each screen is a StatelessWidget built from standard Flutter widgets. No external packages required.
5.Wire the screens up using your own Navigator or go_router calls.

EnterprisePush to GitHub

Push your generated code directly to a GitHub repository without leaving the builder.

1.In the Export modal, open the Push to GitHub tab.
2.Click Connect GitHub and authorise the OAuth app - a popup will appear and close automatically.
3.Pick an existing repository from the dropdown, or enter a new repo name to create one.
4.Enter a branch name (defaults to main).
5.Click Push. Your code file is committed directly to GitHub and you will get a link to it.

Good to know

  • The exported file is named after your project slug (e.g. My App becomes my-app.dart).
  • Screens are exported in the order shown in the screen list.
  • Asset images (backgrounds, icons) are referenced by their hosted URL. Download them separately if you need local assets bundled with your app.
  • More frameworks (React Native, Swift, Kotlin) are coming soon - you can register interest from the framework picker inside the builder.