{"id":43493721,"url":"https://github.com/casavo/habitat","last_synced_at":"2026-02-03T10:18:51.979Z","repository":{"id":196823525,"uuid":"654204452","full_name":"casavo/habitat","owner":"casavo","description":"Casavo Design System Library","archived":false,"fork":false,"pushed_at":"2026-01-23T09:21:03.000Z","size":3396,"stargazers_count":3,"open_issues_count":8,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-01-24T02:15:15.605Z","etag":null,"topics":["components","design-system","hacktoberfest","library","react","ui","ux"],"latest_commit_sha":null,"homepage":"https://casavo.github.io/habitat/","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/casavo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-15T15:50:57.000Z","updated_at":"2026-01-23T09:21:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"98c4458c-9276-43cc-b941-8c991c1e96df","html_url":"https://github.com/casavo/habitat","commit_stats":null,"previous_names":["casavo/habitat"],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/casavo/habitat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casavo%2Fhabitat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casavo%2Fhabitat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casavo%2Fhabitat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casavo%2Fhabitat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/casavo","download_url":"https://codeload.github.com/casavo/habitat/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casavo%2Fhabitat/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29041058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T10:09:22.136Z","status":"ssl_error","status_checked_at":"2026-02-03T10:09:16.814Z","response_time":96,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["components","design-system","hacktoberfest","library","react","ui","ux"],"created_at":"2026-02-03T10:18:51.855Z","updated_at":"2026-02-03T10:18:51.973Z","avatar_url":"https://github.com/casavo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Habitat - Casavo Design System Library\n\n\u003e Welcome to the Casavo design system repository! This is where you can find all the components, guidelines and resources to create amazing user experiences for Casavo. Whether you are a developer, a designer or a product manager, you will find everything you need to get started. Explore the repository and have fun!\n\n![docs/images/meme.png](docs/images/meme.png)\n\n## Design first\n\nThis project is a design driven project, which means we care a lot about the user experience and the aesthetics of our\nproduct. We want to create something that is beautiful, functional and easy to use.\n\nEverything in this codebase is a reflection of what has been defined on the\nrelated [Figma board](https://www.figma.com/file/0vYcLbHGHFIJ44hFI45WQJ/%F0%9F%9A%80-Habitat?type=design).\n\n## Built on top of\n\n- [React](https://react.dev/) + [Typescript](https://www.typescriptlang.org/) - the library for web and native user\n  interfaces\n- [Vanilla Extract](https://vanilla-extract.style/) / Emotion - zero-runtime stylesheets in typeScript\n- [Storybook](https://storybook.js.org/) - frontend workshop for building UI components and pages in isolation\n- [Vite.js](https://vitejs.dev/) - next Generation Frontend Tooling\n\n## What's included?\n\nYou can check the [public Storybook](https://casavo.github.io/habitat) to test and experiment with the currently\navailable components.\n\nTo sneak peek the incoming new features or components and participate in the discussions you\ncan [visit the issue section](https://github.com/casavo/habitat/issues) of this repo, or you can\ncheckout [the project's board](https://github.com/orgs/casavo/projects/20) to have a quick overview of the development\nstatus.\n\n## Using Habitat in your project\n\n\u003e **HEADS UP!** currently you need\n\u003e\nto [add the Casavo private NPM registry token](https://github.com/casavo/community-of-practice/blob/master/frontend/best-practices/setup-project.md#package-registry),\n\u003e but we are planning to release this package as a public NPM one in the near future.\n\ninstall the package in your project (_you can use whatever package manager you prefer_)\n\n```bash\nnpm i @casavo/habitat\n```\n\nimport the `style.css` and `HabitatTheme` global class and apply it to top level node of you application.\n\n\u003e **HEADS UP!** the `@casavo/habitat/style.css` file will also apply a global CSS reset/normalise, it is suggested to\n\u003e remove existing reset solutions.\n\n```typescript jsx\n// src/pages/index.tsx - assuming it is a Next.js application\nimport Head from \"next/head\";\nimport {FC} from \"react\";\n\nimport \"@casavo/habitat/style.css\";\nimport {HabitatTheme} from \"@casavo/habitat\";\n\nexport default function Home(): FC =\u003e {\n  return (\n    \u003c\u003e\n      \u003cHead\u003e\n        \u003ctitle\u003eNext app + Habitat DS\u003c/title\u003e\n      \u003c/Head\u003e\n      \u003cmain id=\"app\" className={HabitatTheme}\u003e\n        {children}\n      \u003c/main\u003e\n    \u003c/\u003e\n  );\n};\n```\n\nthen import and use the components that you need in yout code\n\n```typescript jsx\n// MyComponent.tsx\nimport {Button} from \"@casavo/habitat\";\n\nexport const MyComponent = (): FC =\u003e {\n  const variant: string = \"secondary\";\n\n  const doSomething = (): void =\u003e window.alert(\"button clicked!\");\n\n  return (\n    \u003cdiv\u003e\n      \u003cButton variant={variant} onClick={doSomething}/\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nyou can also import a specific component directly\n\n```typescript jsx\nimport {Badge} from \"@casavo/habitat/badge\"\nimport {Button} from \"@casavo/habitat/button\"\nimport {Checkbox} from \"@casavo/habitat/checkbox\"\nimport {Switch} from \"@casavo/habitat/switch\"\nimport { H1, H2, H3, H4, H5, H6, Body, Inline } from \"@casavo/habitat/typography\"\n```\n\n| Habitat Components | [RSC](https://www.plasmic.app/blog/how-react-server-components-work) |\n|-------------------|----------------------------------------------------------------------|\n| Badge             | ✅                                                                    |\n| Button            | ❌                                                                    |\n| Checkbox          | ❌                                                                    |\n| Typography        | ✅                                                                    |\n\n\u003c!--\n## 🚧🚧 WIP 🚧🚧 - How to override the base theme\n\n1. get a new set of Design Tokens generated by Figma from the designers\n2. TBD convert the file using the provided CLI\n3. create new theme utility file in your project (for instance: `app/utils/theme.css.ts`)\n4. add the following content\n\n```typescript\n// app/utils/theme.css.ts\n\n// the theme creation utility of VE\nimport { createTheme } from \"@vanilla-extract/css\";\nimport { vars } from \"@casavo/habitat\";\n\n// this is the file created in step 2\nimport tokens from \"./project-tokens.json\";\n\nexport const ProjectTheme = createTheme(vars, {\n  color: tokens.colors,\n});\n```\n\n5. similar to the previous chapter, apply the global class to the main project component but use the the class defined in the previous step\n\n```typescript\n// App.tsx\nimport Head from \"next/head\";\nimport { FC } from \"react\";\n\nimport \"@casavo/habitat/style.css\";\nimport { ProjectTheme } from \"app/utils/theme.css.ts\";\n\nexport default function Home(): FC =\u003e {\n  return (\n    \u003c\u003e\n      \u003cHead\u003e\n        \u003ctitle\u003eNext app + Habitat DS\u003c/title\u003e\n      \u003c/Head\u003e\n      \u003cmain id=\"app\" className={ProjectTheme}\u003e\n        {children}\n      \u003c/main\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n6. now you can use the components as usual but you will notice that they will be styled using the provided set of tokens\n--\u003e\n\n## Local development\n\nClone the repo and cd into it\n\n```bash\ngit clone git@github.com:casavo/habitat.git\ncd habitat\n```\n\ninstall the NPM dependencies\n\n```bash\nnpm ci\n```\n\nstart the Storybook development server\n\n```bash\nnpm run dev\n```\n\nthe Storybook instance will automatically open in your browser at `http://localhost:6006/`.\n\nPlease refert to the [docs](docs/development.md) for in depth info on how to work locally.\n\n## How to participate?\n\n\u003e Before opening issues or pull requests plaese read our [code of conduct](CODE_OF_CONDUCT.md), then\n\u003e refer to the guidelines described in the \"[Contributing](CONTRIBUTING.md)\" section.\n\nFor information, requests, bug and inconsistencies alerts join the `#habitat-design-system` Slack channel.\n\n## Updating the Design Tokens (WiP)\n\nThis library heavily relies on a set of Design Tokens defined in the Figma board. When the tokens changes on the source\nboard, the designers exports a new `.json` file that the developers can integrate in the repo and use by following this\nsteps:\n\n1. copy the `.json` generated by Figma in the root folder of the project\n\n    - if the file has the same name of the existing one just overwrite it\n    - if the file name change delete the existing one and update the `source` value in the `dictionary.config.json` file\n\n2. from the terminal execute `$ npm run update:tokens`\n3. this will generate a new plain `.json` token file in the `src/utils` folder\n4. commit the changes, push the code and create a new PR as described in the \"[Contributing](CONTRIBUTING.md)\" section\n\n## (Very short) FAQ\n\n\u003e How to use i18n strings that includes HTML entities?\n\nWith `next-translate` we already have a dedicated component that handles the HTML interpolation, you can use it as children to any of our components as following:\n\n```jsx\nimport { Body, Inline } from \"@casavo/habitat\"\nimport Trans from \"next-translate/Trans\"\n\n\u003cBody\u003e\n  \u003cTrans\n    components={{\n      strong: \u003cInline strong /\u003e,\n    }}\n    i18nKey={\"context:my-text\"}\n  /\u003e\n\u003c/Body\u003e\n```\n\nso as you can see we are correctly rendering the HTML markup inside the component and also mapping any `\u003cstrong\u003e` tag defined in the i18n string with an `\u003cInline\u003e` Habitat component.\n\nIn the case where you are **not** receiving the `i18nKey` string but just a string with HTML content within, you can use the `html=\"\"` prop that we added in every typography components:\n\n```jsx\nimport { Body } from \"@casavo/habitat\"\n\nconst HTMLstring = `Some \u003cstrong\u003etext\u003c/strong\u003e with HTML entities. \u003cbr /\u003e Enjoy!`;\n\n\u003cBody html={HTMLstring} /\u003e\n```\n\nthat prop is a wrapper for React's [dangerouslySetInnerHTML](https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html), and should be used as a last resort\n\n\u003e Is it possible to use Habitat in a Casavo project that is already using other styling solutions?\n\nYes, so far we did it in project that were using Emotion and Vanilla Extract with another theme and we never got any\nissue. So this opens the way to a progressive adoption in your existing project.\n\n\u003e Can I use this library in a non React or Node.js environment?\n\nThere is a related [discussion in the issue section](https://github.com/casavo/habitat/issues/27) of this repository.\n\n\u003e Which \"parts\" can be used as non-React stuff?\n\n- the Design Tokens `.json` file\n- the CSS reset applied in the `style.css` file\n- the `vars` object exported from `/src/utils/theme.ts`\n\n## License\n\nCode is distributed under the [Apache 2.0](LICENSE), Casavo logo and brand are registered trademarks.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasavo%2Fhabitat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcasavo%2Fhabitat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasavo%2Fhabitat/lists"}