Skip to main content
The TapRails SDK ships with a complete, production-ready UI layer. You can use it as-is, theme it to match your brand, or use its primitives alongside your own custom screens.

​
TapRailsThemeProvider

Wrap your app root with TapRailsThemeProvider to enable theming across all TapRails components: 
import { TapRailsThemeProvider } from '@taprails/tap-to-pay';

<TapRailsThemeProvider
  colorOverrides={{
    primary: '#6366F1',      // Brand color (default: TapRails purple #8B5CF6)
    success: '#22C55E',      // Confirmation green
    error: '#EF4444',        // Error red
    background: '#FFFFFF',   // Screen background
    text: '#1F2937',         // Primary text
  }}
>
  <YourApp />
</TapRailsThemeProvider>

​
colorOverrides

All fields are optional — any value you omit falls back to the TapRails default:
FieldDefaultDescription
primary#8B5CF6Main brand color (buttons, icons, accents)
success#10B981Success states and confirmations
error#EF4444Error states
background#0D0D0DScreen background
surface#1A1A1ACard / elevated surface background
text#FFFFFFPrimary body text
textMuted#9CA3AFMuted / secondary text
border#2D2D2DDividers and borders

​
useTheme

Access the active theme anywhere in your component tree: 
import { useTheme } from '@taprails/tap-to-pay';

function CustomComponent() {
  const theme = useTheme();

  return (
    <View style={{ backgroundColor: theme.colors.surface }}>
      <Text style={{ color: theme.colors.primary, ...theme.typography.styles.h2 }}>
        Hello
      </Text>
      <Text style={{ color: theme.colors.textMuted }}>
        Subtext
      </Text>
    </View>
  );
}

​
theme.colors

All colors from colorOverrides merged with TapRails defaults, accessible as theme.colors.<key>.

​
theme.typography.styles

Pre-built text style objects:
KeyUsage
h1Large screen heading
h2Section heading
h3Card heading
bodyRegular body text
bodySmallSmall secondary text
labelInput labels
buttonButton label text
monoMonospace (tx hashes, addresses)

​
Button Component

A themed, accessible button with variants and sizes: 
import { Button } from '@taprails/tap-to-pay';

// Primary CTA
<Button
  title="Pay $25.00"
  onPress={handlePay}
  variant="primary"   // 'primary' | 'secondary' | 'ghost' | 'danger'
  size="lg"           // 'sm' | 'md' | 'lg'
  loading={isProcessing}
  disabled={!isReady}
/>

// Ghost / outlined
<Button
  title="Cancel"
  onPress={onCancel}
  variant="ghost"
  size="md"
/>

// Danger (e.g. revoke session key)
<Button
  title="Revoke Access"
  onPress={handleRevoke}
  variant="danger"
/>

​
ButtonProps

PropTypeDefaultDescription
titlestring—Button label
onPress() => void—Press handler
variantButtonVariant'primary'Visual style
sizeButtonSize'md'Height and font size
loadingbooleanfalseShows spinner, disables press
disabledbooleanfalseDisables interaction and dims button
iconReactNode—Optional icon to the left of label
styleStyleProp<ViewStyle>—Additional container styles

​
Icon Component

Access TapRails’s icon set directly: 
import { Icon } from '@taprails/tap-to-pay';

<Icon name="nfc" size={32} color="#8B5CF6" />
<Icon name="check-circle" size={24} />
<Icon name="x" size={20} color="red" />
Icons use the lucide-react-native library under the hood. The name prop accepts any Lucide icon name.

​
IconProps

PropTypeDefaultDescription
namestring—Lucide icon name (snake_case)
sizenumber24Icon width and height in points
colorstringtheme.colors.textIcon color
strokeWidthnumber2Stroke weight

​
Accessibility

TapRails UI components are built WCAG AA compliant:
  • All interactive elements have accessibilityLabel and accessibilityRole
  • Minimum touch targets of 44×44pt
  • Color contrast ratios meet WCAG AA (≥ 4.5:1 for text)
  • Loading states announce to screen readers via accessibilityLiveRegion
  • Full keyboard navigation support