{"id":15792933,"url":"https://github.com/snowball-tech/fractal","last_synced_at":"2026-05-30T14:00:55.255Z","repository":{"id":177538848,"uuid":"655579819","full_name":"snowball-tech/fractal","owner":"snowball-tech","description":"The open-source mono-repository for the design reference, components libraries and documentations of Fractal, Snowball's design system.","archived":false,"fork":false,"pushed_at":"2026-04-20T16:04:06.000Z","size":17965,"stargazers_count":35,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-04-20T17:41:42.658Z","etag":null,"topics":["design-system","design-tokens","figma","javascript","lodash","mono-repository","react","snowball","storybook","style-dictionary","styleguide","stylelint","testing-library","turborepo","typescript","vercel","yarn","yarn3"],"latest_commit_sha":null,"homepage":"https://fractal.snowball.xyz","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/snowball-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-06-19T07:33:04.000Z","updated_at":"2026-04-20T16:04:09.000Z","dependencies_parsed_at":"2023-10-04T07:45:05.492Z","dependency_job_id":"963780bc-2900-44b2-9f3d-7e8d6784d865","html_url":"https://github.com/snowball-tech/fractal","commit_stats":{"total_commits":1367,"total_committers":4,"mean_commits":341.75,"dds":0.373811265544989,"last_synced_commit":"842353863149f423c49344c45104c97525ccaa68"},"previous_names":["snowball-tech/fractal"],"tags_count":653,"template":false,"template_full_name":null,"purl":"pkg:github/snowball-tech/fractal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snowball-tech%2Ffractal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snowball-tech%2Ffractal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snowball-tech%2Ffractal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snowball-tech%2Ffractal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/snowball-tech","download_url":"https://codeload.github.com/snowball-tech/fractal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snowball-tech%2Ffractal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33694714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-30T02:00:06.278Z","response_time":92,"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":["design-system","design-tokens","figma","javascript","lodash","mono-repository","react","snowball","storybook","style-dictionary","styleguide","stylelint","testing-library","turborepo","typescript","vercel","yarn","yarn3"],"created_at":"2024-10-04T23:07:13.056Z","updated_at":"2026-05-30T14:00:55.249Z","avatar_url":"https://github.com/snowball-tech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fractal - Snowball's design system\n\n\u003c!-- prettier-ignore-start --\u003e\n| [`design-tokens`](./packages/design-tokens) | [`fractal`](./packages/fractal) |\n| - | - |\n| [![design-tokens](https://img.shields.io/npm/v/@snowball-tech/design-tokens)](https://www.npmjs.com/package/@snowball-tech/design-tokens) | [![fractal](https://img.shields.io/npm/v/@snowball-tech/fractal)](https://www.npmjs.com/package/@snowball-tech/fractal) |\n| ![design-tokens-dependants](https://img.shields.io/librariesio/dependents/npm/@snowball-tech/design-tokens) | ![fractal-dependants](https://img.shields.io/librariesio/dependents/npm/@snowball-tech/fractal) |\n| ![design-tokens-downloads](https://img.shields.io/npm/dt/@snowball-tech/design-tokens) | ![fractal-downloads](https://img.shields.io/npm/dt/@snowball-tech/fractal) |\n| ![design-tokens-score](https://img.shields.io/npms-io/final-score/@snowball-tech/design-tokens) | ![fractal-score](https://img.shields.io/npms-io/final-score/@snowball-tech/fractal) |\n\n| Quality on `main` branch | Security on `main` branch | Release on `main` branch | Chromatic on `main` branch |\n| - | - | - | - |\n| ![Quality](https://github.com/snowball-tech/fractal/actions/workflows/quality.yml/badge.svg?branch=main\u0026event=push) | ![Security](https://github.com/snowball-tech/fractal/actions/workflows/security.yml/badge.svg?branch=main\u0026event=push) | ![Release](https://github.com/snowball-tech/fractal/actions/workflows/release.yml/badge.svg?branch=main\u0026event=push) | ![Chromatic](https://github.com/snowball-tech/fractal/actions/workflows/storybook.yml/badge.svg?branch=main\u0026event=push) |\n\u003c!-- prettier-ignore-end --\u003e\n\nThe open-source mono-repository for the design reference, components libraries\nand documentations of Fractal, Snowball's design system.\n\n## Setup\n\nBefore anything, start by cloning the repository:\n\n```bash\ngit clone git@github.com:snowball-tech/fractal.git\n```\n\n\u003e If you haven't setup any SSH key to your GitHub account, you will need to do\n\u003e so. Check out the documentation on\n\u003e [how to connect with SSH](https://docs.github.com/en/authentication/connecting-to-github-with-ssh).\n\u003e Alternatively, you can also use HTTPS to clone the repository _(but this is\n\u003e not recommended)_:\n\u003e\n\u003e ```bash\n\u003e git clone https://github.com/snowball-tech/fractal.git\n\u003e ```\n\n\u003e Note that you can also use the [GitHub CLI](https://cli.github.com/) to clone\n\u003e the repository:\n\u003e\n\u003e ```bash\n\u003e gh repo clone snowball-tech/fractal\n\u003e ```\n\nWhen cloned, go into the repository directory:\n\n```bash\ncd fractal\n```\n\n### Pre-requisites\n\nBefore setting up this repository and start using it/contributing to it, you'll\nneed to make sure you have some tools installed on your machine.\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick here to see the details\u003c/summary\u003e\n\n### **MacOS only**\n\n\u003cdetails\u003e\n\u003csummary\u003eClick for more information\u003c/summary\u003e\n\nIf you are on MacOS, you will need some extra things to make the steps below\neasier.\n\n1. **Homebrew**\n\nFirst of all, you will need [HomeBrew](https://brew.sh/):\n\n```bash\n/bin/bash -c \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\"\n```\n\n\u003e You can always check the [official documentation](https://brew.sh) if you have\n\u003e any question or issue\n\n4. **Shell**\n\nYou are probably using Zsh as your default shell.\n\nSome steps below are updating the `.zshrc` file in your home directory.\nSo we have to make sure this file exists:\n\n```bash\ntouch ~/.zshrc\n```\n\nIf you are using Bash as your default shell, run:\n\n```bash\ntouch ~/.bash_profile\n```\n\n\u003e These commands may give you an error if the files already existed.\n\u003e You can ignore it.\n\n\u003c/details\u003e\n\n### **NodeJS**\n\nTo be able to work with this repository, you will have to have a working version\nof NodeJS.\n\nYou can simply install the latest version of the 24.x.x build.\n\nTo do so, it's recommended to use a Node Version Manager like\n[NVM](https://github.com/nvm-sh/nvm) or [N](https://github.com/tj/n)\n\n#### **NVM**\n\n```bash\ncurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash\n```\n\n\u003e Note that you may check on the\n\u003e [official installation documentation](https://github.com/nvm-sh/nvm#install--update-script)\n\u003e if a newer version is available.\n\n\u003e You can always check the\n\u003e [official documentation](https://github.com/nvm-sh/nvm#node-version-manager---)\n\u003e if you have any question or issue\n\nThen restart your terminal _(on MacOS you have to completely quit the Terminal\napplication before restarting it)_.\n\nThen you can make NVM automatically select the appropriate NodeJS version for\nthe repository:\n\n```bash\nnvm use\n```\n\n#### **N**\n\n```bash\ncurl -L https://bit.ly/n-install | bash\n```\n\nThen restart your terminal _(on MacOS you have to completely quit the Terminal\napplication before restarting it)_.\n\n\u003e Alternatively, on MacOS you can also run:\n\u003e\n\u003e ```bash\n\u003e brew install n\n\u003e ```\n\u003e\n\u003e And then restart your terminal by completely quitting the Terminal application\n\u003e and restarting it.\n\n\u003e You can always check the\n\u003e [official installation documentation](https://github.com/mklement0/n-install#n-install-mdash-introduction)\n\u003e and the [official documentation](https://github.com/tj/n#n--interactively-manage-your-nodejs-versions)\n\u003e if you have any question or issue\n\nThen you can make N automatically select the appropriate NodeJS version for\nthe repository:\n\n```bash\nn auto\n```\n\n### **Yarn**\n\nThis mono-repository is base on Yarn Workspaces.\nSo you'll have to have [Yarn](https://yarnpkg.com/) on its 4.x.x version.\n\nWhen having NodeJS installed, simply run:\n\n```bash\ncorepack enable\ncorepack prepare yarn@stable --activate\n```\n\n\u003e You can always check the\n\u003e [official installation documentation](https://yarnpkg.com/getting-started/install)\n\u003e if you have any question or issue\n\nThen make sure you have the latest 4.x.x version installed:\n\n```bash\nyarn --version\n```\n\nThis should output a 4.x.x version _(e.g. \"4.12.0\")_.\n\n\u003c/details\u003e\n\n## Installation\n\nThere is an automated setup process that will handle all the steps for you\n(dependencies, configuration, ...):\n\n```bash\nyarn \u0026\u0026 yarn setup \u0026\u0026 yarn husky\n```\n\n### There you go\n\nYou are now ready to start working on Fractal.\n\n## Usage \u0026 Development\n\n\u003e It's recommended to regularly update the dependencies and the environment on\n\u003e your local copy of the repository:\n\u003e\n\u003e ```bash\n\u003e yarn\n\u003e ```\n\nThis repository is a mono-repository. This means that it contains multiple\npackages and applications all together in a single Git repository.\n\nEach of these packages and applications contains their own documentation in\ntheir own `README.md` file.\n\n\u003e See the [dedicated `TOOLING.md` documentation](./docs/TOOLING.md) for more\n\u003e information about the mono-repository management with Yarn workspaces.\n\n### File structure\n\nThis repository is organized around two major directories:\n\n```text\nfractal\n  |-- apps\n  |-- packages\n  |-- ...\n```\n\n#### Applications\n\nApplications are located in the [apps](./apps) directory.\n\nThis directory contains applications made to be published publicly as\ndocumentation support for the whole design system.\n\nThere are currently \\*no applications in Fractal repository.\n\n#### Packages\n\nPackages are located in the [packages](./packages) directory.\n\nThis directory contains packages made to be published in a **public** NPM\nrepository (\u003chttps://www.npmjs.com\u003e) and used in other packages and/or apps.\n\nThere are currently **2** packages available in Fractal:\n\n- **[design-tokens](./packages/design-tokens)**: the list of design tokens\n  defining the design system and to be used in all the apps _(web, mobile, ...)_\n  and packages throughout the organization;\n\n- **[fractal](./packages/fractal)**: the React component library, made of\n  components, styles, icons, ... based on Radix-UI and TailwindCSS and to be used\n  in web (React) applications.  \n  It also contains the Storybook documentation that is uploaded to Chromatic and\n  the main documentation webiste.\n\n### TypeScript\n\nSee [the dedicated `CONVENTIONS.md`](./docs/CONVENTIONS.md) and\n[`TOOLING.md`](./docs/TOOLING.md) documentations.\n\n### Linting \u0026 Formatting\n\nSee [the dedicated `CONVENTIONS.md`](./docs/CONVENTIONS.md) and\n[`TOOLING.md`](./docs/TOOLING.md) documentations.\n\n### Dependencies\n\n\u003e Always remember to add dependency if you **really** need it to avoid\n\u003e cluttering the packages and degrading the performance both in the developers\n\u003e and users side.\n\n**It is your duty** as a member of the Snowball's engineering team to help\nmainting the dependencies up to date. This means that you are expected and\nshould help reviewing, testing and merging dependencies updates PRs on a regular\nbasis.\n\n\u003e The best way to do so is to regularly check the\n\u003e [Renovate dashboard](https://github.com/snowball-tech/fractal/issues/1) and\n\u003e [the list of Pull Requests](https://github.com/snowball-tech/fractal/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc+label%3Adev-deps%2Cdeps),\n\u003e for example every morning at the beginning of your day.\n\nAlso, see the [dedicated `TOOLING.md` documentation](./docs/TOOLING.md) for more\ninformation.\n\n### Environment variables\n\nSee [the dedicated `TOOLING.md` documentation](./docs/TOOLING.md).\n\n## Tooling\n\nSee [the dedicated `TOOLING.md` documentation](./docs/TOOLING.md).\n\n## Contributing\n\nSee [the dedicated `CONTRIBUTING.md` documentation](./CONTRIBUTING.md).\n\n### Conventions\n\nSee [the dedicated `CONVENTIONS.md` documentation](./docs/CONVENTIONS.md).\n\n## Help and feedback\n\nIf you have any questions or feedback, feel free to reach out to us using this\nrepository [issues](https://github.com/snowball-tech/fractal/issues) or [discussions](https://github.com/snowball-tech/fractal/discussions).\n\nYou can also use the internal #engineering Slack channel if you are a member of\nthe Snowball tech team.\n\nYou can also check\n[the dedicated `TROUBLESHOOTING.md` documentation](./docs/TROUBLESHOOTING.md)\nfor frequently asked question and troubleshooting.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnowball-tech%2Ffractal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnowball-tech%2Ffractal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnowball-tech%2Ffractal/lists"}