{"id":21212207,"url":"https://github.com/jferrettiboke/cairo","last_synced_at":"2025-07-10T09:31:33.304Z","repository":{"id":42753092,"uuid":"194400361","full_name":"jferrettiboke/cairo","owner":"jferrettiboke","description":"[WIP] 🚧🚧🚧 🔺 The Design System Framework — Build consistent, themeable, type-safe, accessible React apps and websites with ease, confidence, and speed.","archived":false,"fork":false,"pushed_at":"2023-01-06T11:29:48.000Z","size":2072,"stargazers_count":7,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-24T16:59:03.344Z","etag":null,"topics":["component-library","components","css-in-js","design-patterns","design-system","design-tokens","design-tools","frontend","frontend-framework","react","reactjs","styled-system","theme-ui"],"latest_commit_sha":null,"homepage":"https://cairo.now.sh","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/jferrettiboke.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}},"created_at":"2019-06-29T11:55:41.000Z","updated_at":"2023-08-13T19:00:58.000Z","dependencies_parsed_at":"2023-02-06T00:00:52.082Z","dependency_job_id":null,"html_url":"https://github.com/jferrettiboke/cairo","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrettiboke%2Fcairo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrettiboke%2Fcairo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrettiboke%2Fcairo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrettiboke%2Fcairo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jferrettiboke","download_url":"https://codeload.github.com/jferrettiboke/cairo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225629733,"owners_count":17499295,"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":["component-library","components","css-in-js","design-patterns","design-system","design-tokens","design-tools","frontend","frontend-framework","react","reactjs","styled-system","theme-ui"],"created_at":"2024-11-20T21:08:18.583Z","updated_at":"2024-11-20T21:08:19.308Z","avatar_url":"https://github.com/jferrettiboke.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Cairo](./cairo.jpg)](https://cairo.now.sh)\n\n\u003cp align=\"center\"\u003e\n  \u003ca aria-label=\"Creator\" href=\"https://github.com/jferrettiboke\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/MADE%20BY%20Jesús%20Ferretti-000000.svg?style=for-the-badge\u0026logo=Logo\u0026labelColor=000000\u0026logoWidth=20\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/cairo\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/npm/v/cairo.svg?style=for-the-badge\u0026labelColor=000000\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"License\" href=\"https://github.com/jferrettiboke/cairo/blob/master/LICENSE\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/npm/l/cairo.svg?style=for-the-badge\u0026labelColor=000000\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Description\n\nCairo helps you generate a production-ready React.js component library from your specs, with a command.\n\nBuild consistent, themeable, type-safe, accessible React apps and websites with ease, confidence, and speed.\n\nMake all your components look like how you want, let Cairo handles the rest, including functionality, accessibility, API design, auto-generated code with TypeScript support, and much more. Superior DX and UX. Always.\n\n## Features\n\n- Great UX\n- Superior DX with a great API design\n- Type-safe (TypeScript)\n- Rapid and easy customization\n- Accessible and responsive by default\n\n## Why\n\nWhen building products, it is tedious to write and maintain components across products, ensure best practices, and many more things. Having one central design system improves the workflow drastically.\n\n- Build products and iterate faster\n- Waste less time maintaining design systems for each product\n- Be more productive\n- Keep consistency across products\n- User experience: ensuring great UX to the end user\n- Accessibility: ensuring content is usable by and for everyone\n- Performance: ensuring fast load times for the end user\n- Developer experience: ensuring superior DX\n\n## TODOs\n\n**CLI**\n\n- [x] Generate components (styling, prop types, TypeScript support...)\n- [ ] Generate Styleguide (theme, components, playground...): `cairo generate --styleguide`\n- [ ] 🤔 Generate and publish to NPM: `cairo generate --npm`\n- [ ] 🤔 Lint (theme, components...): `cairo lint`\n\n**Primitives**\n\n- [x] Define first components\n- [x] Make custom props responsive\n- [ ] Give good defaults (WIP)\n- [ ] Make components accessible (WIP)\n\n**Examples**\n\n- [ ] Replicate Vercel Design\n- [ ] Replicate Stripe Design\n\n## Contribute\n\nPlease, do not hesitate to contribute to this project (it does not matter how small your contribution could look like — everything counts in some way).\n\n## FAQs\n\nTODO\n\n## Creator\n\nMade with ❤️ by [Jesús Ferretti](https://twitter.com/jferrettiboke)\n\n---\n\n## Documentation\n\n### Getting Started\n\n#### Installation\n\nUse `npm i -D cairo` or `yarn add -D cairo` to install Cairo as a dev dependency.\n\n#### Specs file\n\nTODO\n\n#### Generate\n\nYou just need to indicate the main entry point for the theme.\n\n`cairo generate -i theme/`\n\nWith a specific output path:\n\n`cairo generate -i theme/ -o /components`\n\nThis will generate all components at `components/generated/`. If you don't specify the output path, it will generate all files at the current working directory, `generated/`.\n\nTo check all options, please execute `cairo --help` in your terminal.\n\n#### Usage\n\nAfter generating all components, you can use them easily.\n\nFirst, be sure to use the provider component.\n\n```jsx\nimport { Provider as CairoProvider } from \"../components/generated\";\nimport theme from \"../theme\";\n\nexport default function App({ children }) {\n  return \u003cCairoProvider theme={theme}\u003e{children}\u003c/CairoProvider\u003e;\n}\n```\n\nAnd then, use any generated component you want.\n\n```jsx\nimport { Button, Box, Text } from \"../components/generated\";\n\nexport default function HomePage() {\n  return (\n    \u003cBox sx={{ p: [2, 4, 6] }}\u003e\n      \u003cText as=\"p\"\u003eHello world!\u003c/Text\u003e\n      \u003cBox\u003e\n        \u003cButton variant=\"primary\"\u003eMy awesome button\u003c/Button\u003e\n      \u003c/Box\u003e\n    \u003c/Box\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjferrettiboke%2Fcairo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjferrettiboke%2Fcairo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjferrettiboke%2Fcairo/lists"}