> ## Documentation Index
> Fetch the complete documentation index at: https://omniflagsdoc.omniretail.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Quickstart
> Instrument your first flag in under five minutes
## 1. Create a flag
1. Navigate to your project in the [OmniFlags dashboard](https://omniflags.omniretail.app).
2. Click **New flag**. Set the key (e.g. `charge-delivery-fee`), type (`Boolean`), and category (`Release`).
3. In the **Targeting** tab, enable the flag and set rollout to `100%`.
Flag keys are scoped to their project. The SDK key you reference in code is `{projectKey}.{flagKey}`, for example `checkout.charge-delivery-fee`.
## 2. Copy your SDK key
Go to **Settings → Environments** and copy the SDK key for the environment you're targeting. SDK keys are environment-scoped. Use separate keys for development, staging, and production.
```
sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ← production
sk_dev_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ← development
```
## 3. Install and initialise the SDK
```bash theme={null}
npm install @omniretail/omniflags-react
```
Wrap your app root with `OmniFlagsProvider`. It fetches the flag snapshot and makes the client available to all descendant components.
```tsx theme={null}
// main.tsx
import { createRoot } from 'react-dom/client';
import { OmniFlagsProvider } from '@omniretail/omniflags-react';
import App from './App';
createRoot(document.getElementById('root')!).render(
);
```
```bash theme={null}
npm install @omniretail/omniflags-react
```
`OmniFlagsProvider` uses React context and must run on the client. Create a wrapper component and add it to your root layout:
```tsx theme={null}
// components/omniflags-provider.tsx
'use client';
import { OmniFlagsProvider } from '@omniretail/omniflags-react';
export function OmniFlagsClientProvider({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
```tsx theme={null}
// app/layout.tsx
import { OmniFlagsClientProvider } from '@/components/omniflags-provider';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Any component that calls a flag hook must be a Client Component (`'use client'`).
```bash theme={null}
npm install @omniretail/omniflags-react-native @react-native-async-storage/async-storage
```
`OmniFlagsProvider` seeds from `AsyncStorage` synchronously on mount (no flicker) and fetches a fresh snapshot in the background.
```tsx theme={null}
// App.tsx
import { OmniFlagsProvider } from '@omniretail/omniflags-react-native';
export default function App() {
return (
);
}
```
```bash theme={null}
dotnet add package OmniFlags.Sdk
```
Register the SDK in `Program.cs`. `AddOmniFlags` registers a hosted service that loads the snapshot at startup, so flags are ready before the first request arrives.
```csharp theme={null}
// Program.cs
builder.Services.AddOmniFlags(options =>
{
options.SdkKey = builder.Configuration["OmniFlags:SdkKey"]
?? throw new InvalidOperationException("OmniFlags:SdkKey is required.");
});
```
```json theme={null}
// appsettings.json
{
"OmniFlags": {
"SdkKey": "sk_live_..."
}
}
```
## 4. Evaluate your flag
```tsx theme={null}
import { useFlag } from '@omniretail/omniflags-react';
function CheckoutButton({ customerId }: { customerId: string }) {
const chargeDeliveryFee = useFlag('checkout.charge-delivery-fee', { customerId });
return (
);
}
```
```tsx theme={null}
import { useFlag } from '@omniretail/omniflags-react-native';
function CheckoutScreen({ customerId }: { customerId: string }) {
const chargeDeliveryFee = useFlag('checkout.charge-delivery-fee', { customerId });
return (
{chargeDeliveryFee ? 'Delivery fee applies' : 'Free delivery'}
);
}
```
```csharp theme={null}
app.MapPost("/checkout/initiate", (
CheckoutRequest req,
OmniFlagsClient flags) =>
{
var ctx = new EvaluationContext { CustomerId = req.CustomerId };
var chargeDeliveryFee = flags.IsEnabled("checkout.charge-delivery-fee", ctx);
var order = new Order
{
DeliveryFee = chargeDeliveryFee ? CalculateFee(req) : 0m,
};
return Results.Ok(order);
});
```
## Next steps
* Configure [targeting rules](/concepts/targeting) to roll out to specific users or segments.
* Use [traffic splits](/concepts/flags#rollout) to A/B test multiple values.
* Read the [evaluation reference](/concepts/evaluation) to understand exactly how the SDK resolves a flag value.