{"id":14483646,"url":"https://github.com/InseeFrLab/onyxia-ui","last_synced_at":"2025-08-30T04:31:29.687Z","repository":{"id":37415803,"uuid":"372915766","full_name":"InseeFrLab/onyxia-ui","owner":"InseeFrLab","description":"🌓  Onyxia UI toolkit","archived":false,"fork":false,"pushed_at":"2025-08-25T15:06:38.000Z","size":51012,"stargazers_count":38,"open_issues_count":3,"forks_count":15,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-25T17:19:20.054Z","etag":null,"topics":["bluehats","design","material-ui","react","typescript","ui-components"],"latest_commit_sha":null,"homepage":"https://inseefrlab.github.io/onyxia-ui/","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/InseeFrLab.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,"zenodo":null}},"created_at":"2021-06-01T17:45:28.000Z","updated_at":"2025-08-25T15:02:37.000Z","dependencies_parsed_at":"2022-07-09T13:47:35.277Z","dependency_job_id":"ff11d57a-ac56-41cd-a179-bc555f87ee60","html_url":"https://github.com/InseeFrLab/onyxia-ui","commit_stats":{"total_commits":1207,"total_committers":15,"mean_commits":80.46666666666667,"dds":0.3305716652858326,"last_synced_commit":"cda99f67e96c98263152b22bf191ad5be27a6a72"},"previous_names":["garronej/onyxia-ui"],"tags_count":429,"template":false,"template_full_name":"garronej/ts-ci","purl":"pkg:github/InseeFrLab/onyxia-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFrLab%2Fonyxia-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFrLab%2Fonyxia-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFrLab%2Fonyxia-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFrLab%2Fonyxia-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/InseeFrLab","download_url":"https://codeload.github.com/InseeFrLab/onyxia-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFrLab%2Fonyxia-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272805331,"owners_count":24995909,"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","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"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":["bluehats","design","material-ui","react","typescript","ui-components"],"created_at":"2024-09-03T00:01:56.689Z","updated_at":"2025-08-30T04:31:29.677Z","avatar_url":"https://github.com/InseeFrLab.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/6702424/120405033-efe83900-c347-11eb-9a7c-7b680c26a18c.png\"\u003e  \n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ci\u003eThe Onyxia UI toolkit\u003c/i\u003e\u003cbr\u003e\n    \u003cbr\u003e\n    \u003cbr\u003e\n    \u003cimg src=\"https://github.com/garronej/onyxia-ui/workflows/ci/badge.svg?branch=main\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/onyxia-ui\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dw/onyxia-ui\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/onyxia-ui\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://inseefrlab.github.io/onyxia-ui/\"\u003eDocumentation\u003c/a\u003e\n\u003c/p\u003e\n\nThis project is a React UI toolkit that implement a design system created for [Onyxia](https://onyxia.sh) by [Marc Hufschmitt](http://marchufschmitt.fr/).\n\nThis project provide [some custom components](https://inseefrlab.github.io/onyxia-ui/?path=/story/sandbox-alert--vue-no-title) but you can also use\nany [MUI component](https://mui.com/) they will be automatically styled to fit the design system.\n\n-   Optimized for typescript, theme customization without module augmentation.\n-   Built in support for the dark mode.\n-   If you want to diverge from the Onyxia Design system, the theme is customizable, you can for example change the fonts and the colors.\n-   Provide splash screen that hide the screen when needed.\n-   Perfect for building white label Web APP: The theme and assets, icons can be configured at runtime.\n\nDisclaimer: `onyxia-ui` is specifically designed to build SPA (Vite projects) and is not SSR compatible (Not compatible with Next).\n\n# Eco-system\n\n-   [tss-react](https://tss-react.dev): Mandatory, the styling solution used by `onyxia-ui`.\n-   [@mui/material](https://mui.com/): Mandatory, onyxia-ui is built on top of MUI.\n-   [gitlanding](https://github.com/thieryw/gitlanding): Optional, a component library to create landing pages with `onyxia-ui`.\n-   [mui-icons-material-lazy](https://github.com/InseeFrLab/mui-icons-material-lazy): Optional, Enable lazy loading of Material icons (if you don't know at build time which icons you will need).\n-   [screen-scaler](https://github.com/garronej/screen-scaler): Optional, if you don't have time to make your app responsive.\n\n# Showcase\n\n## [datalab.sspcloud.fr](https://datalab.sspcloud.fr/catalog/inseefrlab-helm-charts-datascience)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/6702424/136545513-f623d8c7-260d-4d93-a01e-2dc5af6ad473.gif\"/\u003e\n\u003c/p\u003e\n\n## [datalab.sspcloud.fr with \"France\" palette](https://datalab.sspcloud.fr/?FONT=%7B%20%0A%20%20fontFamily%3A%20%22Marianne%22%2C%20%0A%20%20dirUrl%3A%20%22%25PUBLIC_URL%25%2Ffonts%2FMarianne%22%2C%20%0A%20%20%22400%22%3A%20%22Marianne-Regular.woff2%22%2C%0A%20%20%22400-italic%22%3A%20%22Marianne-Regular_Italic.woff2%22%2C%0A%20%20%22500%22%3A%20%22Marianne-Medium.woff2%22%2C%0A%20%20%22700%22%3A%20%22Marianne-Bold.woff2%22%2C%0A%20%20%22700-italic%22%3A%20%22Marianne-Bold_Italic.woff2%22%0A%7D%0A\u0026PALETTE_OVERRIDE=%7B%0A%20%20focus%3A%20%7B%0A%20%20%20%20main%3A%20%22%23000091%22%2C%0A%20%20%20%20light%3A%20%22%239A9AFF%22%2C%0A%20%20%20%20light2%3A%20%22%23E5E5F4%22%0A%20%20%7D%2C%0A%20%20dark%3A%20%7B%0A%20%20%20%20main%3A%20%22%232A2A2A%22%2C%0A%20%20%20%20light%3A%20%22%23383838%22%2C%0A%20%20%20%20greyVariant1%3A%20%22%23161616%22%2C%0A%20%20%20%20greyVariant2%3A%20%22%239C9C9C%22%2C%0A%20%20%20%20greyVariant3%3A%20%22%23CECECE%22%2C%0A%20%20%20%20greyVariant4%3A%20%22%23E5E5E5%22%0A%20%20%7D%2C%0A%20%20light%3A%20%7B%0A%20%20%20%20main%3A%20%22%23F1F0EB%22%2C%0A%20%20%20%20light%3A%20%22%23FDFDFC%22%2C%0A%20%20%20%20greyVariant1%3A%20%22%23E6E6E6%22%2C%0A%20%20%20%20greyVariant2%3A%20%22%23C9C9C9%22%2C%0A%20%20%20%20greyVariant3%3A%20%22%239E9E9E%22%2C%0A%20%20%20%20greyVariant4%3A%20%22%23747474%22%0A%20%20%7D%0A%7D%0A)\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/6702424/139843650-8907ac5b-9fde-41ce-9c7d-9df9e10ce3e1.png\" /\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/6702424/139843848-8fe5d132-5cd2-4840-8719-e6d5929b07d3.png\" /\u003e\n\u003c/p\u003e\n\n## [datalab.sspcloud.fr with \"Ultraviolet\" palette](https://datalab.sspcloud.fr/?FONT=%7B%20%0A%20%20fontFamily%3A%20%22Geist%22%2C%20%0A%20%20dirUrl%3A%20%22%25PUBLIC_URL%25%2Ffonts%2FGeist%22%2C%20%0A%20%20%22400%22%3A%20%22Geist-Regular.woff2%22%2C%0A%20%20%22500%22%3A%20%22Geist-Medium.woff2%22%2C%0A%20%20%22600%22%3A%20%22Geist-SemiBold.woff2%22%2C%0A%20%20%22700%22%3A%20%22Geist-Bold.woff2%22%0A%7D%0A\u0026PALETTE_OVERRIDE=%7B%0A%20%20focus%3A%20%7B%0A%20%20%20%20main%3A%20%22%23067A76%22%2C%0A%20%20%20%20light%3A%20%22%230AD6CF%22%2C%0A%20%20%20%20light2%3A%20%22%23AEE4E3%22%0A%20%20%7D%2C%0A%20%20dark%3A%20%7B%0A%20%20%20%20main%3A%20%22%232D1C3A%22%2C%0A%20%20%20%20light%3A%20%22%234A3957%22%2C%0A%20%20%20%20greyVariant1%3A%20%22%2322122E%22%2C%0A%20%20%20%20greyVariant2%3A%20%22%23493E51%22%2C%0A%20%20%20%20greyVariant3%3A%20%22%23918A98%22%2C%0A%20%20%20%20greyVariant4%3A%20%22%23C0B8C6%22%0A%20%20%7D%2C%0A%20%20light%3A%20%7B%0A%20%20%20%20main%3A%20%22%23F7F5F4%22%2C%0A%20%20%20%20light%3A%20%22%23FDFDFC%22%2C%0A%20%20%20%20greyVariant1%3A%20%22%23E6E6E6%22%2C%0A%20%20%20%20greyVariant2%3A%20%22%23C9C9C9%22%2C%0A%20%20%20%20greyVariant3%3A%20%22%239E9E9E%22%2C%0A%20%20%20%20greyVariant4%3A%20%22%23747474%22%0A%20%20%7D%0A%7D%0A)\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/6702424/139844196-0079858c-6778-4569-a7f8-409f1ce9652d.png\" /\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/6702424/139844260-b4948b34-eca1-4d5b-a5c9-e856500fe921.png\" /\u003e\n\u003c/p\u003e\n\n# Usage\n\n`yarn add onyxia-ui @mui/material @emotion/react @emotion/styled tss-react`\n\nThe easer way to get started is to checkout this demo repository: [onyxia-ui + gilanding starter](https://github.com/garronej/gitlanding-demo).\n\nYou can see more advanced examples here: [test app of this repo](https://github.com/InseeFrLab/onyxia-ui/tree/main/test-app).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInseeFrLab%2Fonyxia-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FInseeFrLab%2Fonyxia-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInseeFrLab%2Fonyxia-ui/lists"}