Build your Universal Component Library
Bringing{' '} shadcn/ui {' '} to React Native. Beautifully crafted components with Nativewind or Uniwind, open source, and almost as easy to use.
================================================
FILE: SECURITY.md
================================================
# Security Policy
## Reporting a Security Issue
If you discover a security issue in this repository, please help us by responsibly disclosing it to us. We appreciate your efforts and will work with you to address and resolve the problem.
Please follow these guidelines when reporting security issues:
### Responsible Disclosure
1. **Do not create public issues for security-related concerns.**
2. Email us at [hello@foundedlabs.com](mailto:hello@foundedlabs.com) with details about the issue.
3. Allow us a reasonable amount of time to address the issue before disclosing it publicly.
### Information to Include
When reporting a security issue, please provide the following information:
- Description of the issue, including steps to reproduce.
- Any specific details or context that can help us understand and address the problem.
- Your contact information for further communication.
## Code Copy-Pasting Disclaimer
This repository allows users to copy and paste code snippets. While we aim to ensure the security of the code, users are responsible for reviewing and using the code responsibly in their own projects. The repository maintainers are not liable for any security vulnerabilities or issues that may arise from code usage.
## Updates and Security Notices
Security updates and notices related to this repository will be communicated through the repository's README or other appropriate channels. Users are encouraged to stay informed about security-related announcements.
## Support
If you have any questions or need further assistance, you can reach out to us at [hello@foundedlabs.com](mailto:hello@foundedlabs.com).
Thank you for helping us keep this repository secure!
================================================
FILE: apps/cli/.changeset/config.json
================================================
{
"$schema": "https://unpkg.com/@changesets/config@3.0.2/schema.json",
"changelog": [
"@changesets/changelog-github",
{
"repo": "founded-labs/react-native-reusables"
}
],
"commit": false,
"fixed": [],
"linked": [],
"access": "restricted",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": []
}
================================================
FILE: apps/cli/.github/actions/setup/action.yml
================================================
name: Setup
description: Perform standard setup and install dependencies using pnpm.
inputs:
node-version:
description: The version of Node.js to install
required: true
default: 20.16.0
runs:
using: composite
steps:
- name: Install pnpm
uses: pnpm/action-setup@v3
- name: Install node
uses: actions/setup-node@v4
with:
cache: pnpm
node-version: ${{ inputs.node-version }}
- name: Install dependencies
shell: bash
run: pnpm install
================================================
FILE: apps/cli/.github/workflows/check.yml
================================================
name: Check
on:
workflow_dispatch:
pull_request:
branches: [main]
push:
branches: [main]
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
permissions: {}
jobs:
build:
name: Build
runs-on: ubuntu-latest
timeout-minutes: 10
steps:
- uses: actions/checkout@v4
- name: Install dependencies
uses: ./.github/actions/setup
types:
name: Types
runs-on: ubuntu-latest
timeout-minutes: 10
steps:
- uses: actions/checkout@v4
- name: Install dependencies
uses: ./.github/actions/setup
- run: pnpm check
lint:
name: Lint
runs-on: ubuntu-latest
timeout-minutes: 10
steps:
- uses: actions/checkout@v4
- name: Install dependencies
uses: ./.github/actions/setup
- run: pnpm lint
test:
name: Test
runs-on: ubuntu-latest
timeout-minutes: 10
steps:
- uses: actions/checkout@v4
- name: Install dependencies
uses: ./.github/actions/setup
- run: pnpm test
================================================
FILE: apps/cli/.github/workflows/release.yml
================================================
================================================
FILE: apps/cli/.github/workflows/snapshot.yml
================================================
name: Snapshot
on:
pull_request:
branches: [main, next-minor, next-major]
workflow_dispatch:
permissions: {}
jobs:
snapshot:
name: Snapshot
if: github.repository_owner == 'Effect-Ts'
runs-on: ubuntu-latest
timeout-minutes: 10
steps:
- uses: actions/checkout@v4
- name: Install dependencies
uses: ./.github/actions/setup
- name: Build package
run: pnpm build
- name: Create snapshot
id: snapshot
run: pnpx pkg-pr-new@0.0.24 publish --pnpm --comment=off
================================================
FILE: apps/cli/.gitignore
================================================
coverage/
*.tsbuildinfo
node_modules/
yarn-error.log
.ultra.cache.json
.DS_Store
tmp/
build/
dist/
.direnv/
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
================================================
FILE: apps/cli/.prettierrc
================================================
{
"tabWidth": 2,
"printWidth": 120,
"semi": false,
"singleQuote": false,
"trailingComma": "none",
"arrowParens": "always"
}
================================================
FILE: apps/cli/.vscode/extensions.json
================================================
{
"recommendations": [
"effectful-tech.effect-vscode",
"dbaeumer.vscode-eslint"
]
}
================================================
FILE: apps/cli/.vscode/settings.json
================================================
{
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.preferences.importModuleSpecifier": "relative",
"typescript.enablePromptUseWorkspaceTsdk": true,
"editor.formatOnSave": true,
"eslint.format.enable": true,
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.semi": false,
"prettier.trailingComma": "none"
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.validate": ["markdown", "javascript", "typescript"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": false
},
"editor.acceptSuggestionOnCommitCharacter": true,
"editor.acceptSuggestionOnEnter": "on",
"editor.quickSuggestionsDelay": 10,
"editor.suggestOnTriggerCharacters": true,
"editor.tabCompletion": "off",
"editor.suggest.localityBonus": true,
"editor.suggestSelection": "recentlyUsed",
"editor.wordBasedSuggestions": "matchingDocuments",
"editor.parameterHints.enabled": true,
"files.insertFinalNewline": true
}
================================================
FILE: apps/cli/LICENSE
================================================
MIT License
Copyright (c) 2024-present Founded Labs
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: apps/cli/README.md
================================================
# React Native Reusables CLI
A command-line toolkit to streamline the integration, setup, and maintenance of reusable React Native components in your projects.
## Features
- **Add**: Quickly add reusable React Native components to your project, with style and path options.
- **Doctor**: Diagnose your project for missing files, misconfigurations, and required dependencies. Optionally auto-install missing dependencies.
- **Init**: Bootstrap a new React Native project pre-configured for reusables, or inspect/repair an existing setup.
## Getting Started
### Installation
You can run the CLI directly with your favorite package manager:
```sh
npx @react-native-reusables/cli@latest Scan to preview.
A complete authentication solution for your app, including sign-up, sign-in, and user management. Powered by Clerk, this template provides a seamless user experience with pre-built components and flows.
Bringing{' '} shadcn/ui {' '} to React Native. Beautifully crafted components with Nativewind or Uniwind, open source, and almost as easy to use.
{props.children}
Reusables
), }} sidebar={SIDEBAR_PROPS} githubUrl="https://github.com/founded-labs/react-native-reusables"> {children}{description}
Effective Date: July 19, 2025
The React Native Reusables App (“the App”) is an interactive developer tool that allows users to explore, preview, and interact with a wide range of UI components and blocks provided by the React Native Reusables project. It is designed for developers and designers who want to evaluate, learn from, and integrate these components into their own applications.
We do not collect, store, or share any personal data. At this time, the App does not require authentication and does not track user behavior, usage statistics, or analytics data.
No authentication mechanisms are currently implemented. If authentication is added in the future, this Privacy Policy will be updated to reflect that change.
Since we do not collect any data, we do not share any data with third parties.
We may update this Privacy Policy if features change. If we do, we will revise the “Effective Date” at the top of this page. For any significant changes, we may provide additional notice within the app.
If you have any questions about this Privacy Policy or the App, please contact us at: hello@foundedlabs.com
Effective Date: July 26, 2025
The React Native Reusables App (“the App”) is an interactive developer tool that enables users to explore and implement UI components and blocks provided by the React Native Reusables project.
If you need help with the App or React Native Reusables, you can:
Support inquiries will be reviewed as time permits. While there is no guaranteed response time, every effort will be made to address questions and issues promptly.
Support details may be updated in the future. When changes occur, they will be reflected on this page.
For any additional assistance, contact:
hello@foundedlabs.com
{title}
}
{[...COMMAND[manager], '@react-native-reusables/cli@latest', ...args].join(' ')}
{description}
PortalHost
{' '}
must be added at the root of your app to support portal rendering on native platforms. Without
it, components that rely on portals, like this one, will not render correctly.
Scan to preview.
Tap to preview in the app
React Native Reusables
react-native-gesture-handler{' '}
to your project and add the following `NativeSelectScrollView` component to your `@/components/ui/select.tsx` file or the file using the scrollable select.
This is not a component library. It is how you build your component library.## Bringing the shadcn/ui experience to React Native Built with familiar tools and libraries, it follows consistent styling, structure, and naming conventions, letting you use your favorite design system to create beautiful universal apps.