react-native-reusables

Name: react-native-reusables
Author: maikotrindade

github.com/maikotrindadeDesign & UI1348 installsUpdated 1d ago

About react-native-reusables

React Native Reusables is a component resource that brings a shadcn/ui-style workflow to React Native through copyable or CLI-scaffolded components. It covers NativeWind and Uniwind theming, RN Primitives, forms, overlays, and reusable blocks.

Key features

01Copyable and CLI-scaffolded components
02CSS variable theming
03Forms and control components
04Overlay and portal patterns
05Registry and CLI workflows
06Authentication blocks

Use cases

01Add reusable UI components to a React Native app
02Set up themed forms and controls
03Build dialogs and other overlays

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/maikotrindade/awesome-react-native-skills --skill react-native-reusables

After installing, type/react-native-reusablesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

best-practices-adding-components.md

best-practices-troubleshooting.md

core-customization.md

core-installation.md

core-overview.md

features-blocks.md

features-components-overview.md

features-forms-controls.md

features-overlays-portals.md

features-registry-cli.md

features-text-and-icons.md

Details

From the project README

React Native Reusables

Targets NativeWind v4, Expo SDK 52+, and Expo Router v4. For Expo SDK tooling see the react-native-expo skill. For standalone state/navigation patterns see the react-native-ecosystem skill.

React Native Reusables brings the shadcn/ui experience to React Native: copy-paste or CLI-scaffolded components, theming via CSS variables, and RN Primitives under the hood. It supports NativeWind and Uniwind, requires a root PortalHost for overlays, and uses a Text inheritance system and an Icon wrapper for Lucide.

Core References

Topic	Description	Reference
Overview	What RNR is, differences from shadcn/ui (portals, no cascade, icons, etc.)	core-overview
Installation	CLI init vs manual setup, adding components, PortalHost, dependencies	core-installation
Customization	components.json, global.css, tailwind.config, theme.ts	core-customization

Features

Components and patterns

Topic	Description	Reference
Components overview	Button, Input, Dialog, variants, asChild, compound components	features-components-overview
Text and icons	TextClassContext inheritance, Icon wrapper with Lucide	features-text-and-icons
Forms & controls	Label, Input, Select, Checkbox, RadioGroup, react-hook-form integration	features-forms-controls
Overlays & portals	PortalHost, Dialog/Popover/SelectContent, contentInsets	features-overlays-portals
Registry and CLI	init, add, doctor; custom registry and registryDependencies	features-registry-cli
Blocks	Auth blocks, Clerk integration, adding blocks via CLI	features-blocks

Best practices

Topic	Description	Reference
Adding components	Prefer CLI, PortalHost placement, path aliases, cn helper, manual copy	best-practices-adding-components
Troubleshooting	doctor, --log-level all, PortalHost, aliases, dependencies	best-practices-troubleshooting

Key Recommendations

PortalHost is required for any overlay (Dialog, DropdownMenu, Popover, Tooltip) — place it last in the root layout
Use the CLI (npx react-native-reusables add <name>) so primitives and paths are wired correctly
Text inside Button — always use <Text> from @/components/ui/text as the direct child so TextClassContext applies variant styles
Icons — use <Icon as={LucideIcon} /> rather than wrapping each icon individually
NativeWind v4 — use .dark:root (not .dark) in global.css for dark-mode CSS variables
Run doctor after manual setup or when something breaks before assuming a bug

Comments

Markdown supported