{"id":19705225,"url":"https://github.com/availity/element","last_synced_at":"2025-04-29T15:30:35.110Z","repository":{"id":71582497,"uuid":"587367743","full_name":"Availity/element","owner":"Availity","description":"React components for the Availity design system Element","archived":false,"fork":false,"pushed_at":"2024-11-06T20:07:08.000Z","size":289737,"stargazers_count":3,"open_issues_count":19,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-11-06T21:53:17.422Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://availity.github.io/element/","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/Availity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-10T15:33:50.000Z","updated_at":"2024-11-06T19:57:30.000Z","dependencies_parsed_at":"2023-10-14T17:14:43.681Z","dependency_job_id":"edde2977-fe75-4d09-8078-b6515909f547","html_url":"https://github.com/Availity/element","commit_stats":{"total_commits":2224,"total_committers":12,"mean_commits":"185.33333333333334","dds":0.3767985611510791,"last_synced_commit":"8082f1d0dda1235e33dff5442789071d1105d5e4"},"previous_names":[],"tags_count":1387,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Availity%2Felement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Availity%2Felement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Availity%2Felement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Availity%2Felement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Availity","download_url":"https://codeload.github.com/Availity/element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224178072,"owners_count":17268795,"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":[],"created_at":"2024-11-11T21:26:58.837Z","updated_at":"2025-04-29T15:30:35.104Z","avatar_url":"https://github.com/Availity.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# availity-element\n\n✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨\n\nThis is a collection of reusable React components intended to be used across multiple projects. These components use [@availity/design-tokens](https://github.com/Availity/element/tree/main/packages/design-tokens#readme) for styling and [Material UI](https://mui.com/) as the base.\n\nVisit our [documentation site](https://design.availity.com/2e36e50c7/p/77f9e0-components) for more information on how to use the components.\n\n## Installation\n\nTo install the library in your project, you can use either NPM or Yarn:\n\n```sh\nnpm install @availity/element\n```\n\nOR\n\n```sh\nyarn add @availity/element\n```\n\n## Usage\n\nThe [@availity/element](https://availity.github.io/element/?path=/docs/element--docs) package contains all of the components and hooks for the design system. We recommend using this package when you want to use multiple components.\n\nTo use the components in your project, you will need to import them first:\n\n```tsx\nimport { Button, ThemeProvider } from '@availity/element';\n```\n\nMake sure all of the components you use are inside the `ThemeProvider` component. We recommend placing it in your root `index.{js|tsx}` file.\n\n```jsx\nimport { ThemeProvider } from '@availity/element';\n\nconst App = () =\u003e {\n  return \u003cThemeProvider\u003e{/* Application code. Most likely a router. */}\u003c/ThemeProvider\u003e;\n};\n```\n\n## Development\n\nThe currently recommended version of node to use when developing in this repo is: `v20`. We recommend using [fnm](https://github.com/Schniz/fnm#readme) to have your node version automatically changed when you `cd` into the repo.\n\nWe use `yarn berry` (aka yarn v3) to manage dependencies. Install `yarn` globally:\n\n```sh\nnpm i -g yarn\n```\n\n\u003e This command will install yarn v1. When we run the next command then yarn v3 will be added.\n\nThen install the dependencies:\n\n```sh\nyarn install\n```\n\nIf you want to see the components in action as you develop then run the `storybook` server as you code\n\n```sh\nyarn start:storybook\n```\n\nWant to make sure you didn't break anything? Run the unit test script\n\n```sh\nyarn test\n```\n\n## Further help\n\nVisit the [Nx Documentation](https://nx.dev) to learn more.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favaility%2Felement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favaility%2Felement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favaility%2Felement/lists"}