{"id":20676797,"url":"https://github.com/flourishhealth/ferns-ui","last_synced_at":"2026-01-07T17:27:40.433Z","repository":{"id":37074500,"uuid":"483004268","full_name":"FlourishHealth/ferns-ui","owner":"FlourishHealth","description":"Full Express React Native Stack - A repo will tools to build full stack Typescript applications with React Native and React Native Web on the frontends and Express + Mongo on the backend.","archived":false,"fork":false,"pushed_at":"2025-02-17T03:13:42.000Z","size":51863,"stargazers_count":3,"open_issues_count":68,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-19T12:02:06.706Z","etag":null,"topics":["expo","hacktoberfest","react-native","react-native-web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FlourishHealth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2022-04-18T21:36:08.000Z","updated_at":"2025-02-07T17:00:44.000Z","dependencies_parsed_at":"2023-09-22T03:14:20.512Z","dependency_job_id":"6662dfd1-39f9-4d60-bfed-f2c84beebbd6","html_url":"https://github.com/FlourishHealth/ferns-ui","commit_stats":null,"previous_names":[],"tags_count":165,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlourishHealth%2Fferns-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlourishHealth%2Fferns-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlourishHealth%2Fferns-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FlourishHealth%2Fferns-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FlourishHealth","download_url":"https://codeload.github.com/FlourishHealth/ferns-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243960435,"owners_count":20375101,"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","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":["expo","hacktoberfest","react-native","react-native-web"],"created_at":"2024-11-16T21:13:42.802Z","updated_at":"2026-01-07T17:27:40.427Z","avatar_url":"https://github.com/FlourishHealth.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ferns-ui\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/ffd05ee5-fbcf-417e-8455-45ea15447361/deploy-status)](https://app.netlify.com/sites/ferns-ui/deploys)\n\n## Why Ferns UI?\nFerns UI provides a consistent UI for React Native and React Native Web, \nsupport iOS, Android, and Web all in one simple repo. It has\ntheming support and is primarily designed for Expo. It provides an abstraction\nlayer over React Native components, making it easier to build responsive\napplications that work across all platforms.\nFor example, instead of using ```\u003cdiv\u003e``` and ```\u003cView\u003e```, you use ```\u003cBox\u003e``` , which \ntranslates to a flexbox-first layout system.\n\nIdeal for designers and developers who value clarity, Ferns UI offers a \nframework for efficient and harmonious designs. Our vision extends beyond a \nUser Interface Library to a User Experience Library, including common UX \npatterns like login flows, allowing you to focus on unique aspects of your app.\n\nJoin us in embracing a design philosophy that prioritizes clarity and \ncoherence. With Ferns UI, build stunning applications with seamless \nuser experiences across all three platforms is a breeze.\n\n## Our Philosophy\nFerns UI streamlines design by reducing unnecessary choices, allowing you to \ncreate beautiful, functional interfaces without distraction. For example, \nbuttons come in a limited set of colors, with no options for custom colors,\nensuring consistency that you decide upfront, rather than with each new \nfeature.\n\n## Consistent Layouts\nOur layout system, built around the Box component and other layout elements, \nensures flexible yet uniform design structures. It's is flexbox-first across\niOS, Android, and Web, making it easy to create responsive designs that work\nacross all platforms.\n\n## Separated Interface Elements\nFerns UI and interaction components follow a set of guidelines for consistency. \nFor instance, you can't add a margin to Text. Instead, you wrap the Text in a \nBox and add the margin to the Box, maintaining a clean and predictable design\nlanguage that separates layout elements from interface and interaction elements.\n\n## Accessibility\nAccessibility is a core principle of Ferns UI. Our components are designed to \nbe fully accessible out of the box, following best practices to ensure that \nall users, including those with disabilities, have a seamless experience. Our\nlint rules and required accessibility props will help you build more accessible\napplications by default.\n\n## Developer Experience\nFerns UI is designed with a TypeScript-first approach, prioritizing an \nexcellent developer experience. Our consistent API across all components \nensures ease of learning and use. This makes it simple to design screens \nthat work seamlessly across web and mobile, with built-in support for \ndifferentiating based on screen size and format.\n\nCheck out the demo app for easily seeing how the UIs work in iOS/Android/Web \nin apps/demo.\n\nYou can see the [web demo here](https://ferns-ui.netlify.app)\n\n# Installation\n\n    yarn add ferns-ui\n\n# Usage\n\nYou must wrap your app in a FernsProvider to use the theme, Toasts, and other features.\n\n    import { FernsProvider } from 'ferns-ui';\n\n    const AppRoot = (): ReactElement =\u003e {\n        return (\n            \u003cSafeAreaProvider\u003e\n                \u003cFernsProvider\u003e\n                    \u003cApp /\u003e\n                \u003c/FernsProvider\u003e\n            \u003c/SafeAreaProvider\u003e\n        );\n    };\n    \n# Cursor Rules\nIf you use Cursor or compatible tools, use the rules in .cursor/rules/ferns-ui-usage.md to\nhelp generate code that uses Ferns UI.\n\n## Dev\n\n    # Install dependencies\n    yarn install\n\n    # Initial build (including type generation)\n    yarn build\n\n    # Build the UI continuously\n    yarn watch\n\n    # In a separate window, run one of the following to run the demo app:\n    yarn web\n    yarn ios\n    yarn android\n    \n\n## Dev with other projects\n\nIf you need to test your changes in another project, you can use this handy bash function:\n\n    # sync ui to different app\n    syncui() {\n        cd \u003cPATH\u003e/ferns-ui/packages/ui \u0026\u0026 yarn build \u0026\u0026 rsync -avp \u003cPATH\u003e/ferns-ui/packages/ui/dist/* \u003cPATH\u003e/app/node_modules/ferns-ui/dist/\n    }\n\nUpdate the paths to match your project directories. This will build and pack up ferns-ui like it is being\nsend to NPM, then install it from the created tarball in your app. `yarn link` is also an option but React\nNative requires extra configuration to support symlinks.\n\n## Releasing\n\nReleases are typically done after each pull request is merged to keep the package up-to-date.\n\n### Publishing a new version\n\n1. Go to the [GitHub releases page](https://github.com/FlourishHealth/ferns-ui/releases)\n2. Click \"Draft a new release\"\n3. Create a new tag with a version number (usually a minor version bump, e.g., `1.11.0`)\n4. Use the \"Generate release notes\" button to auto-populate the description\n5. Click \"Publish release\"\n\n### What happens automatically\n\nAfter publishing the release, the following happens automatically via `.github/workflows/ui-publish.yml`:\n\n1. The package version in `package.json` is updated to match your release tag\n2. The package is built and published to NPM (takes a couple of minutes)\n3. A pull request is automatically created with the version bump\n4. You'll receive a Slack notification when the release is complete\n\n### Approving the version bump PR\n\nAfter the release is published, you'll get a PR that updates the version in `package.json`. You can approve and merge this PR yourself.\n\n### Using the new version in flourish\n\nTo use your newly released version of ferns-ui in the flourish app:\n\n1. Navigate to the flourish repository\n2. Update the `ferns-ui` version in `app/package.json`:\n   ```json\n   \"ferns-ui\": \"1.11.0\"\n   ```\n3. Run `yarn install` in the `app/` directory\n4. Create a PR with this change (requires team member approval)\n\n\n## Upgrading dependencies\n\nTo upgrade to the latest Expo and upgrade the related dependencies:\n\n    yarn upgrades\n\nThis will upgrade Expo, upgrade Expo packages, sync the changes from apps/demo to packages/ui,\nand update yarn.lock.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflourishhealth%2Fferns-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflourishhealth%2Fferns-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflourishhealth%2Fferns-ui/lists"}