Button
Primary interactive element for triggering actions
Component Overview
The Synchronicity Design System includes 39 production-ready components organized into functional categories. Each component supports theming (light/dark/OLED), accessibility, and follows React Native best practices.
Actions & Buttons
Section titled “Actions & Buttons”Components for triggering actions and user interactions.
IconButton
Compact button with icon only
FloatingActionButton
Primary action button that floats above content
Chip
Compact interactive elements for filtering
Form Inputs
Section titled “Form Inputs”Components for collecting user input.
Input
Standard text input field
TextArea
Multi-line text input
SearchInput
Search field with icon
NumberInput
Numeric input with stepper controls
Checkbox
Binary selection control
Radio
Single selection from options
Switch
Toggle between on/off states
Slider
Range value selection
Rating
Star-based rating input
DatePicker
Calendar date selection
TimePicker
Time selection with wheel picker
Layout & Structure
Section titled “Layout & Structure”Components for organizing content and page structure.
Card
Container for grouping related content
Divider
Visual separator between content
List
Organized list of items
Accordion
Expandable content sections
Collapsible
Show/hide content toggle
ScreenContainer
Page layout wrapper
Navigation
Section titled “Navigation”Components for navigating between views and content.
TabBar
Bottom tab navigation
Tabs
Horizontal tab content switcher
SegmentedControl
Segmented option selector
StepIndicator
Multi-step progress indicator
Menu
Dropdown action menu
Overlays & Modals
Section titled “Overlays & Modals”Components that appear above the main content.
Modal
Dialog overlay for focused interactions
BottomSheet
Slide-up panel from bottom
ActionSheet
Bottom action menu
Popover
Floating content overlay
Tooltip
Contextual help on hover/tap
Feedback & Status
Section titled “Feedback & Status”Components for communicating status and feedback to users.
Alert
Inline status messages
Banner
Full-width announcements
Toast
Temporary notification messages
Badge
Status indicator labels
Tag
Categorization labels
ProgressBar
Progress indicator bar
Spinner
Loading state indicator
Skeleton
Content loading placeholder
EmptyState
Empty content placeholder
Data Display
Section titled “Data Display”Components for displaying data and information.
Avatar
User profile image
I Ching Specific
Section titled “I Ching Specific”Specialized components for I Ching divination.
HexagramVisual
Hexagram line visualization
CoinFlip
Animated coin flip for casting
ThreeCoins
Three-coin casting display
TrigramCard
Trigram information card
TrigramDrawingCanvas
Draw trigrams by hand
ReadingListItem
Reading history list item
Quick Import
Section titled “Quick Import”Import all components from the React Native package:
import { Button, Card, Input, Modal, Toast, // ... and more} from '@synchronicity/react-native';Or import individual components:
import { Button } from '@synchronicity/react-native';