Gravity
  • Welcome to Gravity
  • Getting Started
  • Stack
  • Updates
  • Rules For AI
  • Troubleshooting
  • Gravity Server
    • Introduction
    • Installation
      • Install Node.js
      • Database Setup
      • Stripe Setup
      • Mailgun Setup
      • Install Gravity
    • Application Structure
    • REST API
      • API Scopes
      • Webhooks
    • Authentication
      • Email Verification
      • Social Sign On
      • Two-Factor Authentication
    • Authorization
      • Feature Access and Plan Restrictions
      • Permissions (Roles)
    • Config
    • Environment Variables
    • Database Queries
    • Handling Errors
    • Logging
    • Localization
    • Push Notifications
    • Email Notifications
    • User Feedback
    • User Onboarding
    • File Uploads
    • Billing
      • Seat Billing
      • Usage Billing
    • Free Accounts
    • CLI Toolbelt
    • Testing
    • AI Tools
    • Background Jobs
    • Deployment
  • Gravity Web
    • Introduction
    • Tailwind & SCSS
    • Routing
    • Events
    • Authentication
    • Localization
    • Hooks
      • useAPI
      • usePlans
      • usePermissions
    • Components
      • Alert
      • Animate
      • Avatar
      • Badge
      • Breadcrumb
      • Button
      • Calendar
      • Card
      • Chart
      • Checklist
      • Credit Card
      • Detail
      • Dialog
      • Dropdown
      • Feedback
      • Form
      • Grid
      • Header
      • Helper
      • Icon
      • Image
      • Layout
      • Link
      • List
      • Loader
      • Logo
      • Nav
      • Onboarding
      • Pagination
      • Popover
      • Progress
      • Row
      • Search
      • Separator
      • Sheet
      • Social
      • Stat
      • Table
      • Tabs
      • Toast (Notification)
      • Tooltip
      • User
      • View
    • Views
    • Handling Errors
    • Deployment
  • Gravity Native
    • Introduction
    • Prerequisites
    • Installation
    • App Context
    • Authentication
    • Localisation
    • External Linking
    • Handling Errors
    • Navigation
    • Config
    • Events
    • Views
    • Components
      • Badge
      • Blankslate
      • Button
      • Card
      • Chart
      • Form
      • Global
      • Grid
      • Icon
      • List
      • Logo
      • Message
      • Modal
      • Nav
      • Notification
      • Progress Bar
      • Search
      • Separator
      • Social
      • Stat
      • View
    • Push Notifications
    • Payments
    • Building Your App
  • Mission Control
    • Introduction
    • Installation
    • User Management
    • Feedback
    • Events
    • Logs
  • Website Template
    • Introduction
    • Environment Variables
    • Styling
    • Components
      • Article
      • Feature List
      • Footer
      • Hero
      • Layout
      • Pricing
      • Meta Data
      • Nav
      • Testimonial
    • Build and Deploy
Powered by GitBook
On this page
  • Preview
  • Usage
  • Props
  • Notes

Was this helpful?

  1. Gravity Web
  2. Components

Onboarding

PreviousNavNextPagination

Last updated 9 months ago

Was this helpful?

A great way to increase engagement and retention is to provide an onboarding flow that guides users through completing the key actions needed to get maximum benefit from your application.

The Onboarding component is a flow to help users set up the app. It accepts multiple views and marks the user as onboarded when the process is completed if the save prop is true.

Preview

Usage

import { Onboarding } from 'components/lib';

function MyComponent({ ...props }){

  const views = [
    { 
      name: 'Welcome', 
      description: 'Introduction to the app', 
      component: <Welcome /> 
    },
    { 
      name: 'Profile Setup', 
      description: 'Set up your profile', 
      component: <ProfileSetup /> 
    },
    { 
      name: 'Preferences', 
      description: 'Set your preferences', 
      component: <Preferences /> 
    },
  ];

  return (
    <Onboarding views={ views } onFinish='/dashboard' save={ true } />
  );
}

Props

Prop
Description
Required
Value

onFinish

url to navigate to when finished

required

string, default: /dashboard

save

Set onboarded column in user database to true on completion

optional

boolean

views

array of child views

required

array of objects ({ name: string, description: string, component: component })

Notes

  • The Onboarding component uses CheckList, Button, Logo, useNavigate, Event, Pagination, useLocation, and useTranslation from 'components/lib'.

  • The views prop specifies the list of views for the onboarding process, each containing a name, description, and component.

  • The onFinish prop specifies the URL to navigate to when the onboarding process is finished.

  • The save prop indicates whether to set the onboarded column in the user database to true upon completion.

  • The PaginationNav function handles the pagination navigation between views.

Gravity onboarding component