{"id":30500587,"url":"https://github.com/heroui-inc/heroui-native","last_synced_at":"2026-01-16T07:17:21.007Z","repository":{"id":311181782,"uuid":"995504072","full_name":"heroui-inc/heroui-native","owner":"heroui-inc","description":"📱Beautiful, fast and modern React Native UI library","archived":false,"fork":false,"pushed_at":"2025-08-22T15:24:29.000Z","size":2809,"stargazers_count":37,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"alpha","last_synced_at":"2025-08-22T17:49:46.028Z","etag":null,"topics":["android","design-system","expo","heroui","ios","library","nativewind","react-native","ui-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heroui-inc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-03T15:21:45.000Z","updated_at":"2025-08-22T17:44:56.000Z","dependencies_parsed_at":"2025-08-22T17:49:57.866Z","dependency_job_id":"14f262ee-6804-4e5c-b837-cc7d09de2fa4","html_url":"https://github.com/heroui-inc/heroui-native","commit_stats":null,"previous_names":["heroui-inc/heroui-native"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/heroui-inc/heroui-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heroui-inc%2Fheroui-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heroui-inc%2Fheroui-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heroui-inc%2Fheroui-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heroui-inc%2Fheroui-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heroui-inc","download_url":"https://codeload.github.com/heroui-inc/heroui-native/tar.gz/refs/heads/alpha","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heroui-inc%2Fheroui-native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272029717,"owners_count":24861372,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-25T02:00:12.092Z","response_time":1107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","design-system","expo","heroui","ios","library","nativewind","react-native","ui-components"],"created_at":"2025-08-25T08:02:44.463Z","updated_at":"2026-01-06T18:18:44.973Z","avatar_url":"https://github.com/heroui-inc.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Component Libraries"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://heroui.com\"\u003e\n      \u003cimg width=\"20%\" src=\"https://raw.githubusercontent.com/heroui-inc/heroui/main/apps/docs/public/isotipo.png\" alt=\"heroui\" /\u003e\n      \u003ch1 align=\"center\"\u003eHeroUI Native\u003c/h1\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Beautiful, fast and modern React Native UI library\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  v1.0.0-alpha.8\n\u003c/p\u003e\n\n## Preview App\n\nExperience HeroUI Native components in action with our preview app! You can explore all components and their variants directly on your device.\n\n### Prerequisites\n\nMake sure you have the latest version of [Expo Go](https://expo.dev/go) installed on your mobile device.\n\n### How to Access\n\nChoose one of the following methods to access the preview app:\n\n#### Option 1: Scan the QR Code\n\nUse your device's camera or Expo Go app to scan:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"20%\" src=\"https://raw.githubusercontent.com/heroui-inc/heroui-native/refs/heads/alpha/expo-go-qr.png\" alt=\"Expo Go QR Code\" /\u003e\n\u003c/p\u003e\n\n\u003e **Note for Android users:** If scanning the QR code with your device's camera or other scanner apps redirects to a browser and shows a 404 error, open Expo Go first and use its built-in QR scanner instead.\n\n#### Option 2: Click the Link\n\n**[📱 Open Demo App in Expo Go](https://link.heroui.com/native-demo)**\n\nThis will automatically open the app in Expo Go if it's installed on your device.\n\n## Getting Started\n\n### 1. Install HeroUI Native\n\n```bash\nnpm install heroui-native\n```\n\n### 2. Install Mandatory Peer Dependencies\n\n```bash\nnpm install react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0 react-native-svg@^15.12.1 tailwind-variants@^3.1.0 tailwind-merge@^3.3.1\n```\n\n\u003e **Important:** It's recommended to use the exact versions specified above to avoid compatibility issues. Version mismatches may cause unexpected bugs.\n\n\u003e **Note:** We will upgrade to Reanimated v4 as soon as Expo SDK 54 is released, ensuring full compatibility with the latest Expo ecosystem.\n\n### 3. Set Up Nativewind\n\nFollow the [NativeWind installation guide](https://www.nativewind.dev/docs/getting-started/installation) to set up Tailwind CSS for React Native.\n\n### 4. Configure Tailwind\n\nUpdate your `tailwind.config.js` to include the HeroUI Native plugin:\n\n```javascript\nimport heroUINativePlugin from 'heroui-native/tailwind-plugin';\n\nmodule.exports = {\n  content: [\n    './app/**/*.{js,jsx,ts,tsx}',\n    './node_modules/heroui-native/lib/**/*.{js,ts,jsx,tsx}',\n  ],\n  presets: [require('nativewind/preset')],\n  theme: {\n    extend: {},\n  },\n  plugins: [heroUINativePlugin],\n};\n```\n\n\u003e **Important:** Import the tailwind plugin from `heroui-native/tailwind-plugin` and not from `heroui-native`.\n\n\u003e **Important:** The `'./node_modules/heroui-native/lib/**/*.{js,ts,jsx,tsx}'` path is crucial for Tailwind to process the library's component styles. Without it, HeroUI Native components won't be styled correctly.\n\n### 5. Wrap Your App with Provider\n\nWrap your application with `HeroUINativeProvider`:\n\n```tsx\nimport { HeroUINativeProvider } from 'heroui-native';\n\nexport default function App() {\n  return \u003cHeroUINativeProvider\u003e{/* Your app content */}\u003c/HeroUINativeProvider\u003e;\n}\n```\n\n### 6. Use Your First Component\n\n```tsx\nimport { Button } from 'heroui-native';\nimport { View } from 'react-native';\n\nexport default function MyComponent() {\n  return (\n    \u003cView className=\"flex-1 justify-center items-center bg-background\"\u003e\n      \u003cButton onPress={() =\u003e console.log('Pressed!')}\u003eGet Started\u003c/Button\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n## Documentation\n\n### Core\n\n- [Provider Configuration](./src/providers/hero-ui-native/provider.md) - Complete setup and configuration guide\n- [Theming](./src/providers/theme/theme.md) - Theme customization, colors, and dark mode\n- [Custom Fonts](./src/providers/theme/theme.md#custom-fonts) - How to use custom fonts with HeroUI Native\n\n### Components\n\n- [Accordion](./src/components/accordion/accordion.md)\n- [Button](./src/components/button/button.md)\n- [Card](./src/components/card/card.md)\n- [Checkbox](./src/components/checkbox/checkbox.md)\n- [Chip](./src/components/chip/chip.md)\n- [Divider](./src/components/divider/divider.md)\n- [Drop Shadow View](./src/components/drop-shadow-view/drop-shadow-view.md)\n- [Error View](./src/components/error-view/error-view.md)\n- [Form Field](./src/components/form-field/form-field.md)\n- [Radio](./src/components/radio/radio.md)\n- [Radio Group](./src/components/radio-group/radio-group.md)\n- [Spinner](./src/components/spinner/spinner.md)\n- [Surface](./src/components/surface/surface.md)\n- [Switch](./src/components/switch/switch.md)\n- [Text Field](./src/components/text-field/text-field.md)\n\n## Changelog\n\nSee [CHANGELOG.md](./CHANGELOG.md) for a history of changes to this library.\n\n## Community\n\nWe're excited to see the community adopt HeroUI, raise issues, and provide feedback.\nWhether it's a feature request, bug report, or a project to showcase, please get involved!\n\n- [Discord](https://discord.gg/9b6yyZKmH4)\n- [X](https://x.com/hero_ui)\n- [GitHub Discussions](https://github.com/heroui-inc/heroui/discussions)\n\n## Contributing\n\nContributions are always welcome!\n\nSee [CONTRIBUTING.md](https://github.com/heroui-inc/heroui-native/blob/main/CONTRIBUTING.md) for ways to get started.\n\nPlease adhere to this project's [CODE_OF_CONDUCT](https://github.com/heroui-inc/heroui-native/blob/main/CODE_OF_CONDUCT.md).\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheroui-inc%2Fheroui-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheroui-inc%2Fheroui-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheroui-inc%2Fheroui-native/lists"}