Components Overview

Rott UI provides 29 production-ready components organized into logical categories.

All Components (Alphabetical)

Browse all components alphabetically in the sidebar, or explore by category below:

Layout Components

Essential components for structuring your screens.

• Container - Root wrapper with safe area handling
• Content - Scrollable content container with keyboard handling
• Header - Navigation header with logo and actions
• Footer - Footer container
• Item - Flexible layout container

Navigation Components

Interactive components for user navigation and actions.

• Button - Interactive button with variants, sizes, icons
• Pressable - Custom touchable areas
• Tab - Tab navigation items
• TabWidget - Complete tab navigation system
• BottomMenu - Bottom navigation bar

Input Components

Form inputs with validation and masking.

• Input - Base input component (overview)
  • Amount - Currency input
  • Checkbox - Checkbox
  • Credit Card - Card number
  • CVC - Card security code
  • Date - Date picker
  • Email - Email validation
  • Expire Date - Card expiry
  • IBAN - IBAN formatting
  • Numeric - Numbers only
  • Password - Password with show/hide
  • Phone - Phone masking
  • PIN - PIN/OTP
  • Search - Search input
  • Select - Dropdown
• Toggle - Toggle switch component

Display Components

Components for displaying content.

• Label - Text display with theming
• Icon - SVG icons (117+ built-in)
• Image - Image display component
• EmptyState - Empty state illustrations
• Skeleton - Loading placeholders

Feedback Components

Components for user feedback and overlays.

• Modal - Full-screen and partial modals
• Alert - Alert banners
• AlertDialog - Confirmation dialogs
• ActionMenu - Action sheet menus
• Notification - Toast notifications
• Result - Result/confirmation screens
• Timer - Timer and countdown components

Data Components

Components for displaying lists and data.

• List - High-performance lists with FlashList

Utility Components

Helper components for common patterns.

• Separator - Visual dividers
• FormContainer - Form wrapper
• ImageBackground - Background image container
• Common - Common UI patterns (CommonItem, CommonItemContainer)

Getting Started

Start with the high-priority components:

1. Button - Most commonly used
2. Input - Complex forms (14+ types)
3. Container & Content - App structure
4. Modal - Overlays and dialogs

Component Features

All Rott UI components share these features:

• ✅ Full TypeScript support
• ✅ Theme color variants
• ✅ Common UI props (margins, padding, flex, etc.)
• ✅ Accessibility support
• ✅ Comprehensive testing
• ✅ Detailed documentation