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

# Quickstart

> Get started with Superflag in under 2 minutes

# Quickstart Guide

Get up and running with Superflag in your React, React Native, or CLI project in under 2 minutes.

## Choose Your Platform

<Tabs>
  <Tab title="React (Web)">
    ### Installation

    ```bash npm theme={null}
    npm install @superflag-sh/react
    ```

    ```bash yarn theme={null}
    yarn add @superflag-sh/react
    ```

    ```bash pnpm theme={null}
    pnpm add @superflag-sh/react
    ```

    ```bash bun theme={null}
    bun add @superflag-sh/react
    ```

    ### Setup

    Wrap your app with `SuperflagProvider`:

    ```tsx theme={null}
    import { SuperflagProvider } from '@superflag-sh/react'

    function App() {
      return (
        <SuperflagProvider clientKey={process.env.NEXT_PUBLIC_SUPERFLAG_CLIENT_KEY}>
          <YourApp />
        </SuperflagProvider>
      )
    }
    ```

    ### Use Flags

    ```tsx theme={null}
    import { useFlag } from '@superflag-sh/react'

    function MyComponent() {
      const showNewFeature = useFlag('new-feature', false)

      return (
        <div>
          {showNewFeature && <NewFeature />}
        </div>
      )
    }
    ```

    <Card title="Full React Docs" icon="react" href="/react/installation">
      Learn more about the React SDK →
    </Card>
  </Tab>

  <Tab title="React Native">
    ### Installation

    ```bash npm theme={null}
    npm install @superflag-sh/react-native @react-native-async-storage/async-storage
    ```

    ```bash yarn theme={null}
    yarn add @superflag-sh/react-native @react-native-async-storage/async-storage
    ```

    ```bash expo theme={null}
    npx expo install @superflag-sh/react-native @react-native-async-storage/async-storage
    ```

    ### Setup

    Wrap your app with `SuperflagProvider`:

    ```tsx theme={null}
    import { SuperflagProvider } from '@superflag-sh/react-native'

    export default function App() {
      return (
        <SuperflagProvider clientKey={process.env.EXPO_PUBLIC_SUPERFLAG_CLIENT_KEY}>
          <YourApp />
        </SuperflagProvider>
      )
    }
    ```

    ### Use Flags

    ```tsx theme={null}
    import { useFlag } from '@superflag-sh/react-native'

    function MyScreen() {
      const showNewUI = useFlag('new-ui', false)

      return (
        <View>
          {showNewUI ? <NewUI /> : <OldUI />}
        </View>
      )
    }
    ```

    <Warning />

    <Card title="Full React Native Docs" icon="mobile" href="/react-native/installation">
      Learn more about the React Native SDK →
    </Card>
  </Tab>

  <Tab title="CLI">
    ### Installation

    ```bash npm theme={null}
    npm install -g @superflag-sh/cli
    ```

    ```bash yarn theme={null}
    yarn global add @superflag-sh/cli
    ```

    ```bash bun theme={null}
    bun install -g @superflag-sh/cli
    ```

    ### Authentication

    Log in to your Superflag account:

    ```bash theme={null}
    superflag login
    ```

    This will open your browser for authentication.

    ### Set Context

    Set your default app and environment:

    ```bash theme={null}
    superflag use my-app production
    ```

    ### Manage Flags

    ```bash theme={null}
    # List all flags
    superflag flags list

    # Create a new flag
    superflag flags create --key new-feature --type bool --value true

    # Get a flag value
    superflag get new-feature

    # Set a flag value
    superflag set new-feature true

    # Toggle a boolean flag
    superflag flags toggle new-feature
    ```

    <Info>
      Using Claude Code for development? See the [Claude Code integration](/cli/claude-code).
    </Info>

    <Card title="Full CLI Docs" icon="terminal" href="/cli/installation">
      Learn more about the CLI →
    </Card>
  </Tab>
</Tabs>

## Get Your Client Key

1. Go to your [Superflag dashboard](https://superflag.sh)
2. Select your app and environment
3. Click "API Keys" in the sidebar
4. Copy your **public client key** (starts with `pub_`)

<Warning>
  Never use server keys (starting with `sdk_`) in client-side code. Only use public keys (`pub_`).
</Warning>

## Environment Variables

### React / Next.js

```bash .env.local theme={null}
NEXT_PUBLIC_SUPERFLAG_CLIENT_KEY=pub_...
```

### React Native / Expo

```bash .env theme={null}
EXPO_PUBLIC_SUPERFLAG_CLIENT_KEY=pub_...
```

## Next Steps

<CardGroup cols={2}>
  <Card title="React SDK" icon="react" href="/react/usage">
    Learn about hooks, caching, and advanced patterns
  </Card>

  <Card title="React Native SDK" icon="mobile" href="/react-native/usage">
    Explore mobile-specific features and production tips
  </Card>

  <Card title="CLI Commands" icon="terminal" href="/cli/commands">
    Master the CLI for automation and CI/CD
  </Card>

  <Card title="API Reference" icon="code" href="/api-reference/overview">
    Build custom integrations with the HTTP API
  </Card>
</CardGroup>