{"id":30430400,"url":"https://github.com/make-software/cspr-design","last_synced_at":"2026-02-13T23:12:56.395Z","repository":{"id":310502105,"uuid":"1033060233","full_name":"make-software/cspr-design","owner":"make-software","description":"A component-based toolkit for building user interfaces in applications that interact with the Casper blockchain, designed as part of the CSPR Products Suite to improve user and developer experience within the Casper Network ecosystem.","archived":false,"fork":false,"pushed_at":"2026-01-28T13:12:12.000Z","size":17871,"stargazers_count":12,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-29T05:04:35.371Z","etag":null,"topics":["blockchain","casper","casper-blockchain","components","react","styled-components","ui"],"latest_commit_sha":null,"homepage":"https://cspr.design","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/make-software.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":null,"security":"SECURITY.md","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":"2025-08-06T08:38:54.000Z","updated_at":"2026-01-28T13:12:09.000Z","dependencies_parsed_at":"2025-08-18T15:23:04.704Z","dependency_job_id":"662989ee-db4f-4b1f-860a-b6abb2f50cad","html_url":"https://github.com/make-software/cspr-design","commit_stats":null,"previous_names":["make-software/cspr-design"],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/make-software/cspr-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/make-software%2Fcspr-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/make-software%2Fcspr-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/make-software%2Fcspr-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/make-software%2Fcspr-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/make-software","download_url":"https://codeload.github.com/make-software/cspr-design/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/make-software%2Fcspr-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29422664,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T22:20:51.549Z","status":"ssl_error","status_checked_at":"2026-02-13T22:20:49.838Z","response_time":78,"last_error":"SSL_read: 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":["blockchain","casper","casper-blockchain","components","react","styled-components","ui"],"created_at":"2025-08-22T18:18:59.819Z","updated_at":"2026-02-13T23:12:56.357Z","avatar_url":"https://github.com/make-software.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSPR.design\n\nCSPR.design is a React-based UI component library powering the CSPR.suite application family, including [CSPR.live](https://cspr.live) and [Casper Wallet](https://casperwallet.io). It provides a consistent design language, reusable components, and shared styling utilities to ensure a cohesive user experience across products. CSPR.design enables faster development, easier maintenance, and a unified brand presence throughout the Casper Ecosystem.\n\n✅ **Battle-tested** components from production apps \\\n✅ **Blockchain-focused** with Casper-specific utilities \\\n✅ **Consistent design** across the Casper ecosystem\n\n[![Install](https://img.shields.io/badge/npm-github%3Amake--software%2Fcspr--design-blue)](https://github.com/make-software/cspr-design)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/)\n[![Production](https://img.shields.io/badge/Production-Tested-green)](https://cspr.live)\n\n---\n\n## Get started\n\nInstall from [NPM](https://www.npmjs.com/package/@make-software/cspr-design) to access ready-to-use components that bring the beloved [Casper blockchain](https://casper.network) community UI to your dApp:\n\n```bash\nnpm install @make-software/cspr-design\n```\n\nSave time on design and implementation with a consistent Casper Network look:\n\n```jsx\nimport {\n  CSPR,\n  BodyText,\n  FlexColumn,\n  PrecisionCase\n} from '@make-software/cspr-design';\n\nconst MyApp = () =\u003e (\n  \u003cFlexColumn itemsSpacing={20}\u003e\n    \u003cBodyText size={2}\u003eAccount Balance:\u003c/BodyText\u003e\n    \u003cCSPR\n      motes=\"50000000000000\"\n      precisionCase={PrecisionCase.full}\n    /\u003e\n  \u003c/FlexColumn\u003e\n);\n```\n\n## Storybook examples\n\nExplore [CSPR.design Storybook](https://storybook.cspr.design) for live previews of every component, complete with usage guidelines and props. See how each UI element behaves in real-world scenarios. No guesswork, just plug and play.\n\n![CSPR.design Storybook](docs/images/storybook.png)\n\n\n## Troubleshooting\n\nPlease add the following to your `vite.config.js` if you are experiencing issues with `vite` and `styled-components`:\n\n```js\nresolve: {\n  alias: {\n    'styled-components': resolve(__dirname, 'node_modules', 'styled-components'),\n  },\n},\n```\n\n[See styled-components FAQ →](https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page)\n\n---\n\n## Resources\n\n\n📕 **[Storybook](https://storybook.cspr.design)**: Interactive examples  \n🐞 **[GitHub Issues](https://github.com/make-software/cspr-design/issues)**: Please report issues here  \n💬 **[Casper Telegram Community](https://t.me/CSPRDevelopers)**: Ask developers and fellow builders for help\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n⭐ **Star this repo if CSPR.design helped you build something cool!**  \n\n\nBuilt by [MAKE](https://makegroup.io) for the Casper ecosystem\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmake-software%2Fcspr-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmake-software%2Fcspr-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmake-software%2Fcspr-design/lists"}