# Interface

> The 14 standard mobile UI building blocks — Badge, Dialog, Tabs, Toast, Tooltip, and more.

Interface components are the standard building blocks for any mobile app — the dialogs,
toasts, tabs, badges, etc. They're prefixed `Otf*` where Tamagui already exports a same-named
component, so no namespace clashes.

## `Headings`

Six heading components — `H1` through `H6` — with consistent letter-spacing + weight + size.
Used everywhere a screen needs a title.

```tsx
import { H1, H2, H3 } from '@otfdashkit/ui-native'

<H1>Summary</H1>
<H2>Recent workouts</H2>
<H3>This week</H3>
```

## `Badge`

Small inline label with tone variants.

```tsx
<Badge tone="success">Active</Badge>
<Badge tone="warning">Pending</Badge>
<Badge tone="destructive">Failed</Badge>
```

## `Icon`

Lucide-icon wrapper that respects current theme color via `$color11` / `$color12` tokens.

```tsx
<Icon name="bell" size={20} color="$color12" />
```

## `BrandIcons`

SVG-only renderers for service logos (Google, Apple, GitHub) used in social-auth buttons.

```tsx
<BrandIcons.Google size={20} />
<BrandIcons.Apple size={20} />
```

## `Image`

Themed `<Image>` wrapper with placeholder + fade-in support.

```tsx
<Image source={{ uri: photo.url }} aspectRatio={1} borderRadius="$4" />
```

## `Pressable`

Themed `<Pressable>` that ripples / presses with token feedback.

```tsx
<Pressable onPress={onTap} pressStyle={{ opacity: 0.7 }}>
  <Text>Tap me</Text>
</Pressable>
```

## `OtfAccordion`

Single- or multi-section accordion built on Tamagui's `Accordion` + custom header styling.

```tsx
<OtfAccordion
  items={[
    { id: 'q1', title: 'How does shipping work?',  content: '...' },
    { id: 'q2', title: 'Can I cancel anytime?',    content: '...' },
  ]}
/>
```

## `OtfTabs`

Native horizontal tab bar with active-pill indicator.

```tsx
<OtfTabs
  value={tab}
  onValueChange={setTab}
  tabs={[
    { value: 'today',  label: 'Today' },
    { value: 'week',   label: 'Week' },
    { value: 'month',  label: 'Month' },
  ]}
/>
```

## `OtfToggleGroup`

Segmented-control style group of toggles.

```tsx
<OtfToggleGroup
  value={view}
  onValueChange={setView}
  items={[
    { value: 'list', icon: <List /> },
    { value: 'grid', icon: <Grid /> },
  ]}
/>
```

## `OtfToast`

Imperative toast — wrap your app in `OtfToastProvider` once, then call `toast()` anywhere.

```tsx
import { toast } from '@otfdashkit/ui-native'

toast.success('Saved')
toast.error('Network error', { description: 'Tap to retry' })
```

## `Tooltip`

Long-press tooltip on native, hover on web.

```tsx
<Tooltip content="Coming soon">
  <Button disabled>Export</Button>
</Tooltip>
```

## `Dialog`

Centered modal with backdrop. Composable parts: `Dialog`, `Dialog.Trigger`, `Dialog.Content`,
`Dialog.Title`, `Dialog.Description`, `Dialog.Close`.

```tsx
<Dialog open={open} onOpenChange={setOpen}>
  <Dialog.Content>
    <Dialog.Title>Delete workout?</Dialog.Title>
    <Dialog.Description>This can't be undone.</Dialog.Description>
    <Button variant="destructive" onPress={handleDelete}>Delete</Button>
  </Dialog.Content>
</Dialog>
```

## `FormField`

Label + input + error wrapper for form rows.

```tsx
<FormField label="Email" error={errors.email}>
  <Input value={email} onChangeText={setEmail} />
</FormField>
```

## `PageContainer`

Top-level page wrapper that owns scroll, safe-area, and theme background. Used when a screen
needs nothing more elaborate than `<ScreenLayout>`.

```tsx
<PageContainer>
  <H1>Settings</H1>
  <Section>...</Section>
</PageContainer>
```

## `Separator`

Horizontal or vertical thin line via the kit's border token.

```tsx
<Separator />
<Separator vertical />
```

## See also

- [Patterns](/docs/components/ui-native/patterns) — bigger, finished UX (BottomSheet, Onboarding, Paywall)
- [Layouts](/docs/components/ui-native/layouts) — screen-shape components