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

# Quick Start

> Get up and running with FlagKit in 5 minutes

## Installation

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    # Install CLI globally
    npm install -g @flagkit-io/cli

    # Install core SDK in your project
    npm install @flagkit-io/core
    ```
  </Tab>

  <Tab title="Standalone Binary">
    ```bash theme={null}
    # macOS/Linux
    curl -fsSL https://flagkit.io/install | bash

    # Works without Bun or Node.js installed
    ```
  </Tab>
</Tabs>

## Initialize Your Project

```bash theme={null}
cd your-project
flagkit init
```

This creates:

* `flags.config.ts` - Your flag definitions
* `.flagkit/` directory - Generated code and configuration

## Define Your First Flag

Edit `flags.config.ts`:

```typescript flags.config.ts theme={null}
import { defineFlags, flag } from "@flagkit-io/core";

export const flags = defineFlags({
  newCheckout: flag
    .boolean()
    .description("Enable new checkout flow")
    .default(false),
});
```

## Generate Client Code

```bash theme={null}
flagkit generate
```

This generates:

* `.flagkit/generated/types.ts` - TypeScript types
* `.flagkit/generated/client.ts` - Runtime client
* `.flagkit/generated/decision-tree.json` - Evaluation rules

## Use in Your Application

### Basic Usage

```typescript theme={null}
import { flags } from './.flagkit/generated/client';

const isNewCheckout = flags.get('newCheckout');

if (isNewCheckout) {
  return <NewCheckout />;
} else {
  return <OldCheckout />;
}
```

### With User Context

```typescript theme={null}
import { flags, calculateRolloutPercent } from "@flagkit-io/core";

const rolloutPercent = calculateRolloutPercent(user.id);

const isNewCheckout = flags.get("newCheckout", {
  userId: user.id,
  rolloutPercent,
  email: user.email,
  plan: user.plan,
});
```

### React Hook

```typescript theme={null}
function MyComponent() {
  const isNewCheckout = flags.useFlag('newCheckout', {
    userId: user.id
  });

  return isNewCheckout ? <NewUI /> : <OldUI />;
}
```

## Configure Targeting Rules

### In the Dashboard

1. Go to [dashboard.flagkit.io](https://dashboard.flagkit.io)
2. Click on your flag
3. Add targeting rules:

```json theme={null}
{
  "condition": {
    "field": "rolloutPercent",
    "op": "lte",
    "value": 9
  },
  "value": true
}
```

### Pull and Deploy

```bash theme={null}
# Pull targeting rules from dashboard
flagkit sync --pull

# Regenerate client with new rules
flagkit generate

# Commit and deploy
git add .flagkit/generated/
git commit -m "chore: update flag rules"
git push
```

## Common Flag Types

<AccordionGroup>
  <Accordion title="Boolean Flag">
    ```typescript theme={null}
    flag.boolean()
      .description('Enable feature')
      .default(false)
    ```
  </Accordion>

  <Accordion title="String Flag">
    ````typescript flag.string() .description('API endpoint') theme={null}
    .default('https://api.example.com') ```
    </Accordion>

    <Accordion title="Number Flag">
    ```typescript flag.number() .description('Max items per page') .min(0)
    .max(100) .default(10) ```
    </Accordion>

    <Accordion title="Enum Flag">
      ```typescript
      flag.enum(['red', 'green', 'blue'])
        .description('Theme color')
        .default('blue')
    ````
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Percentage Rollouts" icon="chart-line" href="/guides/percentage-rollouts">
    Learn how to gradually roll out features
  </Card>

  <Card title="Deployment Guide" icon="rocket" href="/guides/deployment">
    Complete deployment workflow from dev to production
  </Card>

  <Card title="Testing Strategies" icon="flask" href="/guides/testing">
    Test your feature flags effectively
  </Card>

  <Card title="CLI Reference" icon="terminal" href="/cli/overview">
    Explore all CLI commands
  </Card>
</CardGroup>