├── .eslintrc.js ├── .gitignore ├── .husky └── pre-commit ├── .prettierrc ├── App.tsx ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── app.json ├── assets ├── adaptive-icon.png ├── examples │ ├── components │ │ ├── avatar-dark.png │ │ ├── avatar-light.png │ │ ├── badges-dark.png │ │ ├── badges-light.png │ │ ├── buttons-dark.png │ │ ├── buttons-light.png │ │ ├── card-dark.png │ │ ├── card-light.png │ │ ├── checkbox-dark-disabled.png │ │ ├── checkbox-dark-enabled.png │ │ ├── checkbox-light-disabled.png │ │ ├── checkbox-light-enabled.png │ │ ├── dialog-dark.png │ │ ├── dialog-light.png │ │ ├── dropdown-dark.jpg │ │ ├── dropdown-light.jpg │ │ ├── input-dark.png │ │ ├── input-light.png │ │ ├── progress-dark.png │ │ ├── progress-light.png │ │ ├── radio-group-dark.png │ │ ├── radio-group-light.png │ │ ├── select-dark.png │ │ ├── select-light.png │ │ ├── skeleton-dark.png │ │ ├── skeleton-light.png │ │ ├── switch-dark.png │ │ ├── switch-light.png │ │ ├── tabs-dark.png │ │ ├── tabs-light.png │ │ ├── toast-dark-progress.png │ │ ├── toast-dark.png │ │ ├── toast-light-progress.png │ │ └── toast-light.png │ ├── example-dark.png │ └── example-light.png ├── favicon.png ├── icon.png └── splash.png ├── babel.config.js ├── components ├── Avatar.tsx ├── Badge.tsx ├── Button.tsx ├── Card.tsx ├── Checkbox.tsx ├── Dialog.tsx ├── DropDown.tsx ├── Input.tsx ├── Progress.tsx ├── RadioGroup.tsx ├── Select.tsx ├── Skeleton.tsx ├── Switch.tsx ├── Tabs.tsx └── Toast.tsx ├── docs ├── avatar.mdx ├── badge.mdx ├── button.mdx ├── card.mdx ├── checkbox.mdx ├── dark-mode.mdx ├── dialog.mdx ├── drop-down.mdx ├── favicon.png ├── input.mdx ├── introduction.mdx ├── logo │ ├── logo-dark.png │ └── logo-light.png ├── mint.json ├── progress.mdx ├── radio-group.mdx ├── select.mdx ├── skeleton.mdx ├── switch.mdx ├── tabs.mdx └── toast.mdx ├── lib └── utils.ts ├── metro.config.js ├── nativewind-env.d.ts ├── package-lock.json ├── package.json ├── packages └── cli │ ├── README.md │ ├── package.json │ ├── src │ ├── commands │ │ ├── add.ts │ │ └── init.ts │ ├── index.ts │ └── utils │ │ ├── get-package-manager.ts │ │ ├── handle-error.ts │ │ ├── logger.ts │ │ ├── registry.ts │ │ └── templates.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ └── yarn.lock ├── styles ├── globals.css └── theme.ts ├── tailwind.config.js ├── tsconfig.json └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['universe/native'], 4 | ignorePatterns: ['.expo', '**/node_modules/**', '**/packages/cli/dist/**'], 5 | }; 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | 11 | # Native 12 | *.orig.* 13 | *.jks 14 | *.p8 15 | *.p12 16 | *.key 17 | *.mobileprovision 18 | 19 | # Metro 20 | .metro-health-check* 21 | 22 | # debug 23 | npm-debug.* 24 | yarn-debug.* 25 | yarn-error.* 26 | 27 | # macOS 28 | .DS_Store 29 | *.pem 30 | 31 | # local env files 32 | .env*.local 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "printWidth": 80, 4 | "semi": true, 5 | "singleQuote": true, 6 | "trailingComma": "es5", 7 | "importOrder": [ 8 | "", 9 | "^@/components/.*$", 10 | "^@/lib/.*$", 11 | "^@/styles/.*$", 12 | "^[./]" 13 | ], 14 | "importOrderSeparation": true, 15 | "importOrderSortSpecifiers": true, 16 | "plugins": ["@trivago/prettier-plugin-sort-imports"] 17 | } 18 | -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable prettier/prettier */ 2 | import { CircleUser, CreditCard, Settings } from 'lucide-react-native'; 3 | import { useState } from 'react'; 4 | import { Alert, ScrollView, Text, TouchableOpacity, View } from 'react-native'; 5 | 6 | import { Avatar, AvatarFallback, AvatarImage } from './components/Avatar'; 7 | import { Badge } from './components/Badge'; 8 | import { Button } from './components/Button'; 9 | import { 10 | Card, 11 | CardContent, 12 | CardDescription, 13 | CardFooter, 14 | CardHeader, 15 | CardTitle, 16 | } from './components/Card'; 17 | import { Checkbox } from './components/Checkbox'; 18 | import { Dialog, DialogContent, DialogTrigger } from './components/Dialog'; 19 | import { 20 | DropDown, 21 | DropDownContent, 22 | DropDownItem, 23 | DropDownItemSeparator, 24 | DropDownLabel, 25 | DropDownTrigger, 26 | } from './components/DropDown'; 27 | import { Input } from './components/Input'; 28 | import { Progress } from './components/Progress'; 29 | import { 30 | RadioGroup, 31 | RadioGroupItem, 32 | RadioGroupLabel, 33 | } from './components/RadioGroup'; 34 | import { ISelectedValue, Select } from './components/Select'; 35 | import { Skeleton } from './components/Skeleton'; 36 | import { Switch } from './components/Switch'; 37 | import { Tabs, TabsContent, TabsList, TabsTrigger } from './components/Tabs'; 38 | import { ToastProvider, ToastVariant, useToast } from './components/Toast'; 39 | import './styles/globals.css'; 40 | 41 | export default function App() { 42 | const [inputText, onChangeText] = useState(''); 43 | const [isEnabled, setIsEnabled] = useState(false); 44 | const [selectedOption, setSelectedOption] = useState(); 45 | 46 | return ( 47 | 48 | 49 | 50 | nativecn-ui 51 | 52 | 53 | 54 | Avatar 55 | 56 | 57 | 62 | CG 63 | 64 | 65 | 70 | SS 71 | 72 | 73 | 74 | 75 | Badge 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | Button 86 | 87 |