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.

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.

<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.

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

`BrandIcons`

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

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

`Image`

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

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

`Pressable`

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

<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.

<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.

<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.

<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.

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

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

Long-press tooltip on native, hover on web.

<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.

<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.

<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>.

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

`Separator`

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

<Separator />
<Separator vertical />