> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Onboarding

> Persist onboarding progress and drive guided user setup flows

# @amisi/onboarding

`@amisi/onboarding` manages onboarding progress with persistent storage and React context.

## Setup

Wrap your app once with `OnboardingProvider`.

```tsx theme={null}
import { OnboardingProvider } from '@amisi/onboarding';

const onboardingConfig = {
  steps: [
    { id: 'welcome', title: 'Welcome' },
    { id: 'profile', title: 'Create Profile' },
    { id: 'done', title: 'Finish' },
  ],
};

export function AppRoot() {
  return (
    <OnboardingProvider config={onboardingConfig}>
      <YourApp />
    </OnboardingProvider>
  );
}
```

## useOnboarding

```tsx theme={null}
import { useOnboarding } from '@amisi/onboarding';

export function OnboardingScreen() {
  const {
    loading,
    state,
    currentStep,
    totalSteps,
    nextStep,
    previousStep,
    completeStep,
    completeOnboarding,
    resetOnboarding,
  } = useOnboarding();

  if (loading) return null;

  const step = state.steps[currentStep];

  return null;
}
```

## Helpers

### Completion

```ts theme={null}
import { useIsOnboardingComplete } from '@amisi/onboarding';

const isComplete = useIsOnboardingComplete();
```

### Progress

```ts theme={null}
import { useOnboardingProgress } from '@amisi/onboarding';

const { current, total, percentage } = useOnboardingProgress();
```

### Route guarding

Use with `@amisi/navigation`.

```tsx theme={null}
import { OnboardingGate } from '@amisi/navigation';
import { useIsOnboardingComplete } from '@amisi/onboarding';

export function AppLayout() {
  const hasCompletedOnboarding = useIsOnboardingComplete();

  return (
    <OnboardingGate
      hasCompletedOnboarding={hasCompletedOnboarding}
      redirectTo="/onboarding"
    >
      <YourApp />
    </OnboardingGate>
  );
}
```