{"id":19152747,"url":"https://github.com/traefik/faency","last_synced_at":"2026-01-02T12:42:40.262Z","repository":{"id":38172979,"uuid":"225421168","full_name":"traefik/faency","owner":"traefik","description":"Faency is the Traefik Labs React component library","archived":false,"fork":false,"pushed_at":"2025-01-21T15:19:45.000Z","size":5988,"stargazers_count":40,"open_issues_count":31,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-28T20:51:45.017Z","etag":null,"topics":["react","react-component","react-library"],"latest_commit_sha":null,"homepage":"https://traefik.github.io/faency","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/traefik.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":"2019-12-02T16:34:44.000Z","updated_at":"2025-01-21T15:18:08.000Z","dependencies_parsed_at":"2024-06-21T20:30:43.914Z","dependency_job_id":"1e4aade4-7894-4662-9549-0369af4e3740","html_url":"https://github.com/traefik/faency","commit_stats":null,"previous_names":["containous/faency"],"tags_count":103,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/traefik%2Ffaency","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/traefik%2Ffaency/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/traefik%2Ffaency/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/traefik%2Ffaency/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/traefik","download_url":"https://codeload.github.com/traefik/faency/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411231,"owners_count":20934653,"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":["react","react-component","react-library"],"created_at":"2024-11-09T08:19:14.471Z","updated_at":"2026-01-02T12:42:40.257Z","avatar_url":"https://github.com/traefik.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Traefik Labs Faency\n\nThis is the React component library and design system for [Traefik Labs](https://traefik.io).\n\nBuilt with React, Typescript, [Stitches](https://github.com/modulz/stitches) and [Radix UI Primitives](https://radix-ui.com/primitives/docs/overview/introduction).\n\n## Demo (Storybook)\n\nYou can find the Storybook with an example for every component in this library [here](https://traefik.github.io/faency).\n\n## Getting started\n\n### How to use Faency\n\n```sh\nnpm install @traefik-labs/faency@next\n\n# or\n\nyarn add @traefik-labs/faency@next\n```\n\n#### Using Stitches Components (Current)\n\nWire up the FaencyProvider which will hold the context with the Theme configuration:\n\n\u003e The provider accepts one parameter besides the `children`, which is the `primaryColor`, that will be used to build the colors used on the Theme. This color can be one of the colors exported by the `Stitches` config, just by adding `$` as a prefix, or can be any string that represents a CSS color.\n\n```jsx\nimport { FaencyProvider } from '@traefik-labs/faency';\n\nconst App = () =\u003e \u003cFaencyProvider primaryColor=\"$blue8\"\u003e{/* your app */}\u003c/FaencyProvider\u003e;\n```\n\nThen you are ready to import components and use them on your project:\n\n```jsx\nimport { Flex, styled } from '@traefik-labs/faency';\n\nconst Container = styled(Flex, {\n  padding: '$3',\n  bg: '$black', // alias for backgroundColor\n  mx: '$2', // alias for margin left and right\n});\n\nconst MyComponent = () =\u003e \u003cContainer\u003e{children}\u003c/Container\u003e;\n```\n\n#### Using Vanilla Extract Components (New - Recommended)\n\nFor better performance with static CSS, use the new Vanilla Extract components:\n\n1. Import the CSS file in your app's entry point:\n\n```jsx\nimport '@traefik-labs/faency/dist/style.css';\n```\n\n2. Wrap your app with the VanillaExtractThemeProvider:\n\n```jsx\nimport { VanillaExtractThemeProvider } from '@traefik-labs/faency';\nimport { BoxVanilla, BadgeVanilla } from '@traefik-labs/faency';\n\nconst App = () =\u003e (\n  \u003cVanillaExtractThemeProvider defaultTheme=\"light\" primaryColor=\"blue\"\u003e\n    \u003cBoxVanilla css={{ p: '$4' }}\u003e\n      \u003cBadgeVanilla variant=\"blue\"\u003eHello Faency!\u003c/BadgeVanilla\u003e\n    \u003c/BoxVanilla\u003e\n  \u003c/VanillaExtractThemeProvider\u003e\n);\n```\n\n\u003e **Note**: Vanilla Extract components use static CSS generated at build time, providing better performance than runtime CSS-in-JS. Components with the `Vanilla` suffix (e.g., `BadgeVanilla`, `BoxVanilla`) require the CSS import above.\n\n## How to contribute\n\n- Make sure you have Node 18+, or if you prefer, you can work in a Docker container:\n\n```sh\ndocker run -it -v $(pwd):/usr/local/src/ -w /usr/local/src/ -p 3000:3000 node:latest bash\n```\n\n- Install the project dependencies\n\n```sh\nyarn install\n```\n\n- Patch the package\n\nStitches package needs to be patched after the upgrade to TypeScript version 5. You can run this script after installing the dependencies to apply the patch:\n\n```sh\nyarn patch-package\n```\n\n- Run the Storybook\n\n```sh\nyarn storybook\n```\n\nAt this point, Storybook should automatically open up in your browser and you can start coding, it has hot reload so it will automatically re-render whenever a change is detected on the code.\n\n### Writing stories\n\nWe use Stories to demonstrate how components can behave and which variants they can take, so it's expected that every component has a Story.\nCheck out how to create stories in the [Storybook Docs](https://storybook.js.org/docs/react/writing-stories/introduction).\n\n### Opening Pull requests\n\n[Pull requests](https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request) are always welcome, but if you have a big change that you would like to work on, it's recommended to open an issue, so we can discuss it beforehand.\n\nA good PR is small, focuses on a single feature or improvement, and clearly communicates the problem it solves.\n\nTry not to include more than one issue in a single PR. It's much easier for us to review multiple small pull requests than one that is large and unwieldy.\n\nNote we follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/).\n\nPlease follow the provided [PR template](/.github/pull_request_template.md).\n\n### Release process\n\nWe use [semantic-release/semantic-release](https://github.com/semantic-release/semantic-release) to automagically release any commit on the `master` branch.\n\nRecommended conventional commit types:\n\n```json\n[\"build\", \"chore\", \"ci\", \"docs\", \"feat\", \"fix\", \"revert\", \"test\"]\n```\n\n- `build`/`chore`: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)\n- `ci`: Changes to CI configuration files and scripts (examples: CircleCi, SauceLabs)\n- `docs`: Documentation (comments) only changes\n- `feat`: A new feature\n- `fix`: A bug fix\n- `revert`: Reverts a previous commit\n- `test`: Adding missing tests or correcting existing tests\n\nBreaking change syntax:\n\n```text\n\u003ctype\u003e!: \u003cdescription\u003e\n```\n\nMatching between commit type and release\n\n```js\n[\n  { breaking: true, release: 'major' },\n  // types impacting release version\n  { revert: true, release: 'patch' },\n  { type: 'feat', release: 'minor' },\n  { type: 'fix', release: 'patch' },\n  { type: 'perf', release: 'patch' },\n];\n```\n\nSee [semantic-release/commit-analyzer](https://github.com/semantic-release/commit-analyzer#readme) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftraefik%2Ffaency","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftraefik%2Ffaency","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftraefik%2Ffaency/lists"}