{"id":14483562,"url":"https://github.com/openfun/cunningham","last_synced_at":"2025-06-10T15:35:24.799Z","repository":{"id":64678051,"uuid":"565909540","full_name":"openfun/cunningham","owner":"openfun","description":"🎨 The Open FUN Design System","archived":false,"fork":false,"pushed_at":"2025-06-03T05:42:36.000Z","size":24382,"stargazers_count":33,"open_issues_count":18,"forks_count":5,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-06-03T18:25:01.282Z","etag":null,"topics":["accessibility","atomic-design","components-library","css","design-system","design-systems","figma","frontend","html","reactjs","storybook","ui-components"],"latest_commit_sha":null,"homepage":"https://openfun.github.io/cunningham/","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/openfun.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-11-14T15:25:54.000Z","updated_at":"2025-05-26T11:02:15.000Z","dependencies_parsed_at":"2023-12-20T07:17:02.151Z","dependency_job_id":"1dddb8be-b975-41bb-970e-6d02f5d9c7f6","html_url":"https://github.com/openfun/cunningham","commit_stats":null,"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openfun%2Fcunningham","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openfun%2Fcunningham/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openfun%2Fcunningham/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openfun%2Fcunningham/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/openfun","download_url":"https://codeload.github.com/openfun/cunningham/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/openfun%2Fcunningham/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259102717,"owners_count":22805539,"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":["accessibility","atomic-design","components-library","css","design-system","design-systems","figma","frontend","html","reactjs","storybook","ui-components"],"created_at":"2024-09-03T00:01:52.024Z","updated_at":"2025-06-10T15:35:24.775Z","avatar_url":"https://github.com/openfun.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://openfun.github.io/cunningham/storybook\"\u003e\u003cimg src=\"./resources/banner.png\" alt=\"\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n# Cunningham\n\n**A design system and a components library.**\n\n\u003ca href=\"https://openfun.github.io/cunningham/storybook\"\u003e\u003cb\u003e📚\u0026nbsp;\u0026nbsp;Documentation\u003c/b\u003e\u003c/a\u003e •\n\u003ca href=\"https://www.figma.com/file/JbPT1R6YUFW4oH8jHvH960/DS-Cunningham---PUBLIC?type=design\"\u003e\u003cb\u003e🖌️\u0026nbsp;\u0026nbsp;Figma\u003c/b\u003e\u003c/a\u003e •\n\u003ca href=\"https://openfun.github.io/cunningham/demo\"\u003e\u003cb\u003e🕹️\u0026nbsp;\u0026nbsp;Demo\u003c/b\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n- **Atomic**: We follow [atomic design principles](https://bradfrost.com/blog/post/atomic-web-design/).\n- **Modular and Reusable**: Each component is designed to be self-contained and reusable across different projects, promoting consistency and saving development time.\n- **Accessibility-focused**: Our components prioritize accessibility standards, making them usable and inclusive for all users.\n- **Design tokens based**: We use [design tokens](https://openfun.github.io/cunningham/storybook/?path=/docs/getting-started-customization--docs#what-are-design-tokens-) to ensure consistency between design and code and allow high customization.\n- **React** based: at the moment we only support React, but we are open to other frameworks, feel free to [contribute](./CONTRIBUTING.md) !\n\n\u003cdiv align=\"center\"\u003e\n\n[![CircleCI](https://circleci.com/gh/openfun/cunningham/tree/main.svg?style=svg)](https://circleci.com/gh/openfun/cunningham/tree/main)\n[![Discord](https://img.shields.io/discord/1082704478463082496?style=flat\u0026logo=discord\u0026label=discord\u0026labelColor=5b61f1\u0026logoColor=white\u0026color=313338)](https://discord.gg/TXPSCMeDzd)\n\n\u003c/div\u003e\n\n## 🔎 Preview\n\nHere are some examples of real life usage of Cunningham components.\n\n\u003ca href=\"https://openfun.github.io/cunningham/storybook\"\u003e\u003cimg src=\"./resources/examples.png\" alt=\"\"/\u003e\u003c/a\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nSee the [documentation](https://openfun.github.io/cunningham/storybook) 📚 to learn more about customization, typography, spacings and available components!\n\n\u003c/div\u003e\n\n## ⚡️ Getting started\n\n➡️ First, install the library\n\n```\nyarn add @openfun/cunningham-react\n```\n\n➡️ Then, add this script to your `package.json` file\n\n```json\n{\n  \"scripts\": {\n    \"build-theme\": \"cunningham -g css -o src\"\n  }\n}\n```\n\n➡️ Then, in order to generate the css file, run\n\n```\nyarn build-theme\n```\n\nIt will generate a file named `cunningham-tokens.css`.\n\n➡️ Then, add these lines at the top of your main stylesheet file:\n\n```\n@import \"@openfun/cunningham-react/fonts\"; // Imports default fonts ( Roboto ). You can also import fonts by yourself.\n@import \"@openfun/cunningham-react/icons\"; // Imports icons ( Material Icons ).\n@import \"@openfun/cunningham-react/style\"; // Imports the default theme.\n@import \"cunningham-tokens\"; // Imports the file you just generated.\n```\n\n\u003e Please take a look at [customization documentation](https://openfun.github.io/cunningham/storybook/?path=/docs/getting-started-customization--docs) for more informations about the `cunningham` command line tool and to customize your local theme.\n\nWe're done! 🎉\n\nTo ensure everything works well, let's test rendering a component, such as the [Button](https://openfun.github.io/cunningham/storybook/?path=/docs/components-button--docs) for example.\n\nNow please see the [documentation](https://openfun.github.io/cunningham/storybook) 📚 to learn more about customization, typography, spacings and available components!\n\n## Contributors\n\n\u003ca href=\"https://github.com/openfun/cunningham/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=openfun/cunningham\" /\u003e\n\u003c/a\u003e\n\n## Contributing\n\nThis project is intended to be community-driven, so please, do not hesitate to get in touch if you have any question related to our implementation or design decisions.\n\nPlease see our [contributing guidelines](./CONTRIBUTING.md).\n\n## License\n\nThis work is released under the MIT License (see [LICENSE](./LICENSE)).\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenfun%2Fcunningham","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopenfun%2Fcunningham","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopenfun%2Fcunningham/lists"}