# Primitives

> The 5 Tamagui-styled atoms — Avatar, Button, Card, Input, Text.

These five primitives are the smallest pieces in `@otfdashkit/ui-native`. They wrap Tamagui's
underlying types with OTF tokens and sane defaults.

## `Text`

Themed text component with size + weight token slots.

```tsx
<Text fontSize="$8" fontWeight="700" color="$color12">Hello</Text>
<Text fontSize="$4" color="$color11">Subtle subtitle</Text>
```

## `Button`

Native pressable button with `variant` + `size` slots.

```tsx
<Button variant="solid" onPress={onSubmit}>Continue</Button>
<Button variant="outline" size="lg">Cancel</Button>
<Button variant="ghost" icon={<X />} circular />
```

Variants: `solid` · `outline` · `ghost` · `destructive`.
Sizes: `sm` · `md` · `lg`.

## `Card`

Themed card container with built-in padding tokens.

```tsx
<Card padding="$4" elevate>
  <Text fontSize="$6" fontWeight="700">Title</Text>
  <Text color="$color11">Subtitle</Text>
</Card>
```

## `Input`

Single-line input with the kit's border + focus styling.

```tsx
<Input
  value={email}
  onChangeText={setEmail}
  placeholder="you@example.com"
  keyboardType="email-address"
  autoCapitalize="none"
/>
```

## `Avatar`

Circular avatar with image + initial fallback. Composable parts:
`Avatar`, `Avatar.Image`, `Avatar.Fallback`.

```tsx
<Avatar circular size="$5">
  <Avatar.Image src={user.avatarUrl} />
  <Avatar.Fallback>{user.initials}</Avatar.Fallback>
</Avatar>
```

## See also

- [Interface](/docs/components/ui-native/interface) — Headings, Dialog, Tabs, Tooltip, Badge, Icon
- [Layouts](/docs/components/ui-native/layouts) — Section, Grid, ScreenLayout, KeyboardStickyFooter