screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile app building flow examples

Search the library

Rork: Onboarding and First App Creation

Open recorded flow

  1. Step 1 · 1:37

    Rork: Header text at the top, followed by a vertical list of selection buttons, and a primary action button at the bottom.See the flow
    Rork

    Header text at the top, followed by a vertical list of selection buttons, and a primary action button at the bottom.

  2. Step 2 · 1:43

    Rork: Header text followed by a vertical list of selection buttons, with a primary CTA button at the bottom.See the flow
    Rork

    Header text followed by a vertical list of selection buttons, with a primary CTA button at the bottom.

  3. Step 3 · 1:47

    Rork: Header text at the top, followed by a vertical list of selection buttons, and a primary action button at the bottom.See the flow
    Rork

    Header text at the top, followed by a vertical list of selection buttons, and a primary action button at the bottom.

  4. Step 4 · 2:03

    Rork: The screen is vertically centered with a loading spinner at the top and text below it.See the flow
    Rork

    The screen is vertically centered with a loading spinner at the top and text below it.

  5. Step 5 · 2:12

    Rork: Top heading and subtext, followed by a large text input area, a primary action button, and the system keyboard at the bottom.See the flow
    Rork

    Top heading and subtext, followed by a large text input area, a primary action button, and the system keyboard at the bottom.

  6. Step 6 · 2:17

    Rork: Top skip button, centered heading and subtext, central notification preview card, bottom primary action button.See the flow
    Rork

    Top skip button, centered heading and subtext, central notification preview card, bottom primary action button.

  7. Step 7 · 2:19

    Rork: The screen features a top-aligned header, a central notification preview card, a system permission modal overlay, and a bottom-aligned primary action button.See the flow
    Rork

    The screen features a top-aligned header, a central notification preview card, a system permission modal overlay, and a bottom-aligned primary action button.

  8. Step 8 · 2:35

    Rork: A centered text block on a dark background with a top navigation bar and a bottom-right floating action button.See the flow
    Rork

    A centered text block on a dark background with a top navigation bar and a bottom-right floating action button.

Rork: Project visibility and upgrade

Open recorded flow

  1. Step 1 · 3:15

    Rork: A dark background with a project title at the top and a bottom-anchored modal sheet containing visibility options.See the flow
    Rork

    A dark background with a project title at the top and a bottom-anchored modal sheet containing visibility options.

  2. Step 2 · 3:19

    Rork: Header, feature list, plan selection card, primary CTA button, and footer links.See the flow
    Rork

    Header, feature list, plan selection card, primary CTA button, and footer links.

v0: Managing App Project

Open recorded flow

  1. Step 1 · 1:39

    v0: Top header with project info, segmented control for tabs, central content area with privacy options, and bottom action buttons.See the flow
    v0

    Top header with project info, segmented control for tabs, central content area with privacy options, and bottom action buttons.

  2. Step 2 · 1:43

    v0: A centered modal window containing a header with project info, a segmented control, a central icon with descriptive text, and a primary action button at the bottom.See the flow
    v0

    A centered modal window containing a header with project info, a segmented control, a central icon with descriptive text, and a primary action button at the bottom.

  3. Step 3 · 1:55

    v0: Top section lists stocks, middle section lists news, bottom section contains navigation bar and a floating modal.See the flow
    v0

    Top section lists stocks, middle section lists news, bottom section contains navigation bar and a floating modal.

  4. Step 4 · 2:00

    v0: A background list of stocks and news items with a centered, rounded modal menu overlaying the bottom-right portion of the screen.See the flow
    v0

    A background list of stocks and news items with a centered, rounded modal menu overlaying the bottom-right portion of the screen.

  5. Step 5 · 2:10

    v0: A header with a title and close button, a scrollable list of log entries, and a bottom bar with two action buttons. A filter menu is overlaid in the top right.See the flow
    v0

    A header with a title and close button, a scrollable list of log entries, and a bottom bar with two action buttons. A filter menu is overlaid in the top right.

  6. Step 6 · 2:22

    v0: A centered modal window with a header, a large empty central area containing a logo, and a footer status bar.See the flow
    v0

    A centered modal window with a header, a large empty central area containing a logo, and a footer status bar.

  7. Step 7 · 2:49

    v0: Top navigation bar, centered notification toast, main content list item, and bottom fixed chat input bar.See the flow
    v0

    Top navigation bar, centered notification toast, main content list item, and bottom fixed chat input bar.

  8. Step 8 · 3:03

    v0: A modal window with a header containing a title and close button, followed by two distinct sections of list items representing integrations.See the flow
    v0

    A modal window with a header containing a title and close button, followed by two distinct sections of list items representing integrations.

  9. Step 9 · 3:10

    v0: A modal window with a header containing an icon, title, and close button, a large empty content area, and a fixed bottom action button.See the flow
    v0

    A modal window with a header containing an icon, title, and close button, a large empty content area, and a fixed bottom action button.

  10. Step 10 · 3:33

    v0: Top header with balance, performance chart, stock list, bottom navigation bar, and a floating action menu in the bottom right corner with a centered modal overlay.See the flow
    v0

    Top header with balance, performance chart, stock list, bottom navigation bar, and a floating action menu in the bottom right corner with a centered modal overlay.

  11. Step 11 · 3:37

    v0: Search bar at top, recent items list in middle, credits and user profile at bottom.See the flow
    v0

    Search bar at top, recent items list in middle, credits and user profile at bottom.

Found an example you like?See the whole story.

See the full library See plans