Catalog

All components

Everything you need to build a full product surface, on iOS and Android.

10 Primitives
41 Components
1022 Unit tests
100% TypeScript

Primitives 10

Box

  • Layout

View that takes spacing, colour, radius and elevation tokens as props.

  • Padding and margin props
  • Theme colour background
  • Radius and 6 elevation levels

Stack

  • Layout

Vertical and horizontal stacks with token-based gaps.

  • VStack and HStack
  • Gap from spacing tokens
  • Align, justify and wrap

Text

  • Typography

Typography primitive bound to the theme type scale.

  • 18 type variants
  • Theme colour tokens
  • Readable accent colours

Heading

  • Typography

Header-role text mapped to the heading styles.

  • Levels 1-3 plus 2 display sizes
  • Header role for screen readers

PressableScale

  • Motion

Pressable with a Reanimated spring scale on press.

  • Configurable scale
  • Respects reduced motion
  • Keyboard focus ring

MarqueeText

  • Motion
  • Typography

Single-line text that scrolls only when it overflows.

  • Overflow detection
  • Configurable speed and pause
  • Static under reduced motion

PaginationDots

  • Navigation

Animated page or step indicator.

  • Active dot widens
  • Announces the current step

SectionLabel

  • Typography

Small uppercase overline with a header role.

  • Uppercase by default
  • Custom transform and colour

SystemIcon

  • Layout

Drawn icon set that looks the same on iOS and Android.

  • 12 glyphs
  • Chevrons mirror in RTL
  • Hidden from screen readers

Components 41

ActionTile

  • Actions

Tappable tile with a tinted icon chip and a label.

  • 5 tones
  • Spring press scale
  • Light haptic on press

Avatar

  • Data display

Circular avatar showing an image or initials.

  • 4 sizes (sm-xl)
  • Initials from a name
  • Custom initials background

BottomSheet

  • Overlays

Modal sheet that slides up from the bottom.

  • Drag down to dismiss
  • Header, Body and Footer parts
  • Keyboard avoidance
  • Screen reader escape gesture

BottomTabBar

  • Navigation

Bottom tab bar with an animated active pill.

  • Per-tab badges
  • Tab roles with selected state
  • Safe-area inset

Button

  • Actions

Main action button with variants, sizes, loading state and icons.

  • 5 variants
  • 3 sizes (sm/md/lg)
  • Loading state
  • Haptic press

Card

  • Layout

Themed surface that becomes pressable when given a handler.

  • 4 elevation levels
  • 3 density sizes
  • Header and footer slots

Checkbox

  • Forms

Checkbox with an optional label.

  • 2 sizes
  • Checkbox role and state
  • Light haptic on toggle

ConfettiOverlay

  • Motion

Celebratory confetti burst that never blocks touches.

  • Configurable particle count
  • Fires when shown
  • Respects reduced motion

Countdown

  • Data display

Self-updating countdown to a deadline.

  • 4 formats
  • Localizable units
  • Expired label and callback

DatePickerInput

  • Forms

Date, time or date-time field.

  • 3 modes
  • Minimum and maximum dates
  • Clearable
  • Read-only fallback without the picker

DateRangePickerInput

  • Forms

Start and end date fields for a range.

  • Each end limits the other
  • Separate error per end
  • Clearable

EmptyState

  • Feedback

Centred zero state with icon, title, message and action.

  • 3 sizes
  • Action slot
  • Summary role

ErrorBoundary

  • Feedback

Error boundary with a retry fallback.

  • Reset keys
  • Custom fallback render
  • withErrorBoundary HOC

FieldLabel

  • Forms

Uppercase field label with a required marker.

  • Required marker
  • Announced as required

HeaderBar

  • Navigation

Screen header with back button, title and actions.

  • Regular and large titles
  • Centred or left title
  • Back chevron mirrors in RTL

Input

  • Forms

Text input with label, error and a focus border.

  • Label, error and required
  • Forwards ref and TextInput props
  • Multiline support

InputPrompt

  • Overlays
  • Forms

Cross-platform text prompt dialog.

  • System Alert.prompt on iOS
  • Themed modal on Android
  • Localized buttons

KeyboardLiftedFooter

  • Layout

Bottom action bar that stays above the keyboard.

  • Lifts with the keyboard
  • On by default on Android

ListItem

  • Data display

List row with icon, subtitle, value and chevron.

  • Chevron when pressable
  • Destructive style
  • Custom slots

ListSection

  • Data display

Grouped list section with a title and a footer note.

  • Grouped card or separate rows
  • Title and footer note

ListSwitchItem

  • Data display
  • Forms

List row with a built-in switch.

  • Switch built in
  • Icon and subtitle

Modal

  • Overlays

Centred dialog with backdrop, title and footer.

  • Header, Body and Footer parts
  • Backdrop dismiss
  • Screen reader escape gesture

ProgressBar

  • Feedback

Determinate horizontal progress bar.

  • Semantic or custom colour
  • Progress bar role with value
  • Configurable height

Radio

  • Forms

Single radio option with an optional label.

  • Controlled selection
  • Radio role
  • Light haptic

ScreenContainer

  • Layout

Safe-area screen wrapper with a tablet max width.

  • Top and bottom safe areas
  • Centred content on tablets
  • Optional padding

SearchBar

  • Forms

Search field with debounce and a clear button.

  • Built-in debounce
  • Clear button
  • Left and right slots

SegmentedControl

  • Forms

iOS-style single-choice segmented control.

  • Radio group for screen readers
  • Typed values
  • Light haptic

Select

  • Forms
  • Overlays

Single-value picker with options in a bottom sheet.

  • BottomSheet picker
  • Option icons
  • Label, error and required

SettingsRow

  • Data display

Settings row with a rounded icon tile.

  • Icon tile
  • Destructive style
  • SettingsSwitchRow variant

Skeleton

  • Feedback

Animated loading placeholder.

  • Card preset
  • Respects reduced motion
  • Localized loading label

Spinner

  • Feedback

Centred activity indicator with an optional label.

  • 2 sizes
  • Announced to screen readers

StatTile

  • Data display

Statistic tile with a label, value and caption.

  • 5 tones
  • 3 sizes
  • Tabular numbers

Switch

  • Forms

Themed native switch with a label and subtitle.

  • Whole row tappable
  • Light haptic
  • Label read with subtitle

TextArea

  • Forms

Multiline input with a label and error.

  • Minimum height in lines
  • Label, error and required

Toast

  • Feedback

Imperative toast mounted once at the app root.

  • 5 variants
  • Top or bottom position
  • Action button
  • Screen reader announcements
Expo React Native 0.84+ iOS Android TypeScript Accessible