React Native · NativeWind

Native Widget Gallery

Cross-platform components from packages/ui/src/native/. Live demos use their web counterparts; native code shown alongside.

Button

packages/ui/src/native/button.tsx

Variants

Sizes

Disabled

import { Button } from '@peblla/ui/native';

<Button variant="default" size="default">
  Book Now
</Button>

<Button variant="brandBordered" size="sm" disabled>
  Sold Out
</Button>

Badge

packages/ui/src/native/badge.tsx

Variants

DefaultSecondaryOutlineDestructive

import { Badge } from '@peblla/ui/native';

<Badge variant="default">Confirmed</Badge>
<Badge variant="destructive">Cancelled</Badge>

Input

packages/ui/src/native/input.tsx

Interactive

Password

Disabled

import { Input } from '@peblla/ui/native';

<Input
  placeholder="you@example.com"
  keyboardType="email-address"
  className="border border-input rounded-md px-3 h-9"
/>

Separator

packages/ui/src/native/separator.tsx

Horizontal & Vertical

Horizontal

Vertical (between items)

Appetizer

Main

Dessert

import { Separator } from '@peblla/ui/native';

<Separator orientation="horizontal" />

<View className="flex-row items-center gap-4 h-5">
  <Text>Item A</Text>
  <Separator orientation="vertical" />
  <Text>Item B</Text>
</View>

Card

packages/ui/src/native/card.tsx

With sub-components

Dinner Omakase

17 piece nigiri omakase including soup, salad and dessert.

Party size: 1–10

Hand Roll Bar

12 seat temaki counter. Max seating 75 min.

Party size: 1–6

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@peblla/ui/native';
import { Button } from '@peblla/ui/native';

<Card className="rounded-xl border border-border">
  <CardHeader>
    <CardTitle>Dinner Omakase</CardTitle>
    <CardDescription>17 piece nigiri omakase…</CardDescription>
  </CardHeader>
  <CardContent>
    <Text>Party size: 1–10</Text>
  </CardContent>
  <CardFooter>
    <Button size="sm">Book Now</Button>
  </CardFooter>
</Card>

Composed — Login Form

Card + Input + Button

Enter your credentials to continue.

Password

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@peblla/ui/native';
import { Input } from '@peblla/ui/native';
import { Button } from '@peblla/ui/native';

<Card>
  <CardHeader>
    <CardTitle>Sign In</CardTitle>
    <CardDescription>Enter your credentials to continue.</CardDescription>
  </CardHeader>
  <CardContent className="gap-3">
    <Input placeholder="you@example.com" keyboardType="email-address" />
    <Input placeholder="Password" secureTextEntry />
  </CardContent>
  <CardFooter className="flex-col gap-2">
    <Button className="w-full">Continue</Button>
    <Button variant="plain" size="sm">Sign up instead</Button>
  </CardFooter>
</Card>