{"id":28995114,"url":"https://github.com/axiscommunications/fluent-components","last_synced_at":"2025-06-25T04:06:35.727Z","repository":{"id":195796889,"uuid":"687849652","full_name":"AxisCommunications/fluent-components","owner":"AxisCommunications","description":"Axis Fluent UI theme, icon, illustrations and custom components.","archived":false,"fork":false,"pushed_at":"2025-05-14T06:17:33.000Z","size":5884,"stargazers_count":16,"open_issues_count":7,"forks_count":7,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-14T07:31:29.958Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://axiscommunications.github.io/fluent-components/","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/AxisCommunications.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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,"zenodo":null}},"created_at":"2023-09-06T06:18:56.000Z","updated_at":"2025-05-14T06:17:07.000Z","dependencies_parsed_at":"2023-09-27T12:20:21.704Z","dependency_job_id":"f473ce10-b069-4c2c-95cf-4d393d035d73","html_url":"https://github.com/AxisCommunications/fluent-components","commit_stats":null,"previous_names":["axiscommunications/fluent-components"],"tags_count":64,"template":false,"template_full_name":null,"purl":"pkg:github/AxisCommunications/fluent-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxisCommunications%2Ffluent-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxisCommunications%2Ffluent-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxisCommunications%2Ffluent-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxisCommunications%2Ffluent-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AxisCommunications","download_url":"https://codeload.github.com/AxisCommunications/fluent-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxisCommunications%2Ffluent-components/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261801988,"owners_count":23211664,"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":"2025-06-25T04:06:34.161Z","updated_at":"2025-06-25T04:06:35.687Z","avatar_url":"https://github.com/AxisCommunications.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React components for use React \u0026 Fluent v9\n\n[![ci](https://github.com/AxisCommunications/fluent-components/actions/workflows/verify.yml/badge.svg)](https://github.com/AxisCommunications/fluent-components/actions/workflows/verify.yml)\n\n**React**: The components work with a range of React versions as specified in the peer dependencies. However, we've experienced type errors in slots when using a `@types/react` version other than 17 (which is the version used by Fluent v9).\n\nThe React packages are based on the `@fluentui/react-*` **v9** packages.\n\n- [`@axiscommunications/fluent-theme`](theme/docs/README.md) - an Axis branded theme\n- [`@axiscommunications/fluent-icons`](icons/docs/README.md) - custom Axis icons\n- [`@axiscommunications/fluent-hooks`](hooks/docs/README.md) - react hooks to use with fluent components\n- [`@axiscommunications/fluent-styles`](styles/docs/README.md) - styles to use with fluent components\n- [`@axiscommunications/fluent-stepper`](components/stepper/docs/README.md) - a stepper component for building e.g. wizards\n- [`@axiscommunications/fluent-slider`](components/slider/docs/README.md) - various slider components\n- [`@axiscommunications/fluent-topbar`](components/topbar/docs/README.md) - top level bar that hosts app and organization selection and menus\n- [`@axiscommunications/fluent-empty-view`](components/empty-view/docs/README.md) - Empty view component that displays when there is no data\n- [`@axiscommunications/fluent-password-input`](components/password-input/docs/README.md) - a password input that lets you reveal the password\n- [`@axiscommunications/fluent-illustrations`](illustrations/docs/README.md) - axis branded illustrations\n\n## Usage\n\n1. Add registry to `.npmrc`, `.yarnrc` or similar, as well as your GitHub token:\n\n   ```\n   @axiscommunications:registry=https://npm.pkg.github.com\n   //npm.pkg.github.com/:_authToken=TOKEN\n   ```\n\n   If using `.yarnrc.yml` this would instead be:\n\n   ```\n   npmScopes:\n     axiscommunications:\n       npmRegistryServer: \"https://npm.pkg.github.com\"\n       npmAuthToken: TOKEN\n   ```\n\n2. Add the `@fluentui/react-components`, `@fluentui/react-icons`, `@axiscommunications/fluent-theme` and `@axiscommunications/fluent-icons` packages.\n\n   ```sh\n   npm add @fluentui/react-components @fluentui/react-icons @axiscommunications/fluent-theme @axiscommunications/fluent-icons\n   ```\n\n3. Start using Fluent UI v9 in and the Axis theme in in your application\n\n   ```tsx\n   import React from \"react\";\n   import { FluentProvider } from \"@fluentui/react-components\";\n   import { axisDarkTheme } from \"@axiscommunications/fluent-theme\";\n   import { createRoot } from \"react-dom/client\";\n\n   const container = document.getElementById(\"root\");\n   const root = createRoot(container!);\n\n   root.render(\n     \u003cReact.StrictMode\u003e\n       \u003cFluentProvider theme={axisDarkTheme}\u003e\n         \u003cApp /\u003e\n       \u003c/FluentProvider\u003e\n     \u003c/React.StrictMode\u003e\n   );\n   ```\n\n## Contributing\n\nMake sure you have node and pnpm installed.\n\n1. Clone this repository\n\n   ```sh\n   git clone git@github.com:AxisCommunications/fluent-components.git\n   ```\n\n2. Install all dependencies\n\n   ```sh\n   pnpm install\n   ```\n\n3. Build all packages\n\n   ```sh\n   pnpm build\n   ```\n\n4. Run examples\n\n   ```sh\n   pnpm dev\n   ```\n\n### Development\n\nThe following is one example of how to use a local version while developing.\n\n1. Application project's package.json:\n   `\"@axiscommunications/fluent-topbar\": \"portal:path/to/repo/top-bar\"`\n2. Application project's esbuild config: `{ preserveSymlinks: true }`\n3. `path/to/repo/top-bar/node_modules`: `rm react -rf`\n\nThis setup avoids bundling multiple copies of React. The application project's dev server\nwill pick up changes only after running `pnpm build`, not when source files change.\n\n## Release a new version\n\n1. Checkout a new temporary branch for the release PR (e.g. `rel`)\n\n   ```sh\n   git fetch\n   git switch -c rel origin/main\n   ```\n\n2. Create release commit on the branch\n\n   ```sh\n   pnpm exec release major|minor|patch\n   ```\n\n   or to release an alpha version\n\n   ```sh\n   pnpm exec release premajor|preminor|prepatch|prerelease\n   ```\n\n3. Push release branch\n\n   ```sh\n   git push origin rel\n   ```\n\n4. Create a PR on GitHub, and when it's merged, it will automatically\n   deploy NPM packages and create a GitHub release.\n   Make sure the `rel` branch is removed after the PR is merged,\n   that makes it easier to re-use it later on.\n\n### Notes\n\nWhen bumping @fluentui/react-components it is preferred to regenerate theme-tokens due to potential updates to tokens.\nThese generated files are used for applications not able to run @fluentui, but still be able to use the themes.\n\n```sh\npnpm --filter @axiscommunications/fluent-theme tokens:runall\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxiscommunications%2Ffluent-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faxiscommunications%2Ffluent-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxiscommunications%2Ffluent-components/lists"}