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.
<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.
<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.
<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.
<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.
<Avatar circular size="$5">
<Avatar.Image src={user.avatarUrl} />
<Avatar.Fallback>{user.initials}</Avatar.Fallback>
</Avatar>