react-native-reusables
The skill is based on React Native Reusables (docs as of 2026-02-26), generated at 2026-02-26.
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, compound pattern | 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 |
More from hairyf/skills
tailwindcss
Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.
1.6Khairy-utils
Comprehensive skills for working with @hairy/utils core utilities
868motion
Motion animation library for JavaScript, React and Vue. Use when creating animations, gestures, layout transitions, scroll-linked effects, or working with motion values and animation controls.
745next
Next.js framework for building React applications with App Router, Server Components, and optimized performance. Use when working with Next.js apps, routing, data fetching, caching, Server Actions, or building full-stack React applications.
696react-use
Collection of essential React Hooks for sensors, UI, animations, side-effects, lifecycles, and state management
668valtio
Valtio proxy state management for React and vanilla JavaScript. Use when creating reactive state, managing application state, or working with proxy-based state management.
613