Reacticx Component Library

Headless, animation-focused React Native component library with 90+ production-ready components.

Docs: https://www.reacticx.com/docs | GitHub: https://github.com/rit3zh/reacticx

Setup

# Install core dependencies
npm install react-native-reanimated react-native-gesture-handler react-native-svg \
  expo-haptics expo-blur expo-symbols @expo/vector-icons @shopify/react-native-skia

# Initialize config (optional, for CLI)
npx reacticx init

# Add components
npx reacticx add <component-name>
npx reacticx add <component> --dir <path> --overwrite
npx reacticx list
npx reacticx list -c <category>

Component Categories

Shaders (8) - GPU-accelerated visual effects

Read references/shaders.md when working with shader components.

Component	Install Name
Aurora	aurora
Chroma Ring	chroma-ring
Energy Orb	energy-orb
Siri Orb	siri-orb
Mesh Gradient	mesh-gradient
Grainy Gradient	grainy-gradient
Skia Ripple	skia-ripple
Wave Scrawler	wave-scrawler

Texts (6) - Animated typography

Read references/texts.md when working with text animation components.

Component	Install Name
Animated Text	animated-text
Dynamic Text	dynamic-text
Fade Text	fade-text
Gooey Text	gooey-text
Curved Marquee	curved-marquee
Staggered Text	staggered-text

Micro Interactions (9) - Interactive feedback elements

Read references/micro-interactions.md when working with micro interaction components.

Component	Install Name
Animated Scroll Progress	animated-scroll-progress
Animated Theme Toggle	animated-theme-toggle
Animated Countdown	countdown
Elastic Slider	elastic-slider
Flexi Button	flexi-button
Gooey Switch	gooey-switch
Hamburger	hamburger
Spin Button	spin-button
Stacked Chips	stacked-chips

Carousels & Scrollables (13)

Read references/components-carousels.md when working with carousel or scrollable components.

Component	Install Name
Blur Carousel	blur-carousel
Cinematic Carousel	cinematic-carousel
Circular Carousel	circular-carousel
Circular List	circular-list
Material Carousel	material-carousel
Parallax Carousel	parallax-carousel
Rotate Carousel	rotate-carousel
Scale Carousel	scale-carousel
Tilt Carousel	tilt-carousel
Vertical Flow Carousel	vertical-flow-carousel
Vertical Page Carousel	vertical-page-carousel
Marquee	marquee
Matched Geometry	matched-geometry

Navigation & Layout (13)

Read references/components-navigation.md when working with navigation, tabs, sheets, or menu components.

Component	Install Name
Accordion	accordion
Bottom Sheet	bottom-sheet
Bottom Sheet Stack	bottom-sheet-stack
Curved Bottom Tabs	curved-bottom-tabs
Dialog	dialog
Disclosure Group	disclosure-group
Dropdown	dropdown
Dynamic Island	dynamic-island
Morphing Tab Bar	morphing-tabbar
Segmented Control	segmented-control
Split View	split-view
Stack Aware Tabs	stack-aware-tabs
Tabs	tabs

Inputs & Controls (13)

Read references/components-inputs.md when working with buttons, inputs, pickers, or toggle components.

Component	Install Name
Animated Input Bar	animated-input-bar
Button	button
CheckBox	check-box
Flip Card	flip-card
OTP Input	otp-input
Picker	picker
Ruler	ruler
Scrollable Search	scrollable-search
Search Bar	search-bar
Seekbar	seekbar
Stepper	stepper
Switch	switch
Theme Switch	theme-switch

Loaders (6)

Read references/display-loaders.md when working with loading indicators.

Component	Install Name
Circle Loader	circle-loader
Circular Loader	circular-loader
Orbitdot Loader	orbiting-dots
Pulsing Loader	pulsing-dots
Rotating Square	rotating-square
Spinner Arc	spinner-arc

Progress & Transitions (5)

Read references/display-progress.md when working with progress indicators or transition effects.

Component	Install Name
Circular Progress	circular-progress
Progress	progress
Rolling Counter	rolling-counter
Shimmer	shimmer
Shimmer Wave Text	shimmer-wave

Content & Display (10)

Read references/display-content.md when working with avatars, badges, headers, toast, or display components.

Component	Install Name
Animated Chip Group	animated-chip
Animated Header ScrollView	animated-header-scrollview
Animated Masked Text	animated-masked-text
Avatar / Avatar Group	avatar / avatar-group
Badge	badge
Empty State	empty-state
QR Code	qr-code
Title	title
Toast	toast

Effects & Visuals (7)

Read references/display-effects.md when working with glow, ripple, cards, or visual effect components.

Component	Install Name
Glow	glow
Infinite Menu	infinite-menu
Lanyard	lanyard
Pagination	pagination
Radial Intro	radial-intro
Ripple	ripple
Stack Cards	stack-cards

Common Dependencies

Package	Used By
react-native-reanimated	Nearly all components
react-native-gesture-handler	Carousels, sliders, switches, ripple
@shopify/react-native-skia	Shaders, gooey effects, theme switch
react-native-svg	Loaders, glow, curved marquee
expo-blur	Text effects, carousels, headers
expo-haptics	Accordion, pagination, pickers
react-native-worklets	Many animation-heavy components

Key Notes

• Wrap with GestureHandlerRootView when using gesture-based components
• Configure react-native-reanimated/plugin in babel config
• Skia components require native module installation
• All animations target 60fps via Reanimated's UI thread
• Some blur effects (expo-blur) work best on iOS
• Import paths follow @/components/{layer}/{name} where layer is base, molecules, organisms, or templates