{"id":18057620,"url":"https://github.com/bring-shrubbery/squircle-js","last_synced_at":"2025-05-16T10:08:35.270Z","repository":{"id":175404791,"uuid":"648537911","full_name":"bring-shrubbery/squircle-js","owner":"bring-shrubbery","description":"A squircle element for your favourite frontend framework!","archived":false,"fork":false,"pushed_at":"2025-03-24T14:50:12.000Z","size":807,"stargazers_count":159,"open_issues_count":7,"forks_count":11,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-16T10:08:24.018Z","etag":null,"topics":["react","solidjs","squircle","squircle-button","svelte","vue"],"latest_commit_sha":null,"homepage":"https://squircle.js.org","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/bring-shrubbery.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":["bring-shrubbery"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2023-06-02T07:49:42.000Z","updated_at":"2025-05-14T23:20:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"265f8198-4dbd-4dd8-afd7-84a7a0622e14","html_url":"https://github.com/bring-shrubbery/squircle-js","commit_stats":{"total_commits":77,"total_committers":3,"mean_commits":"25.666666666666668","dds":0.06493506493506496,"last_synced_commit":"d489837a4d782efcfa09c5d771e859c9b35a29d3"},"previous_names":["bring-shrubbery/squircle-element","bring-shrubbery/squircle-js"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bring-shrubbery%2Fsquircle-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bring-shrubbery%2Fsquircle-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bring-shrubbery%2Fsquircle-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bring-shrubbery%2Fsquircle-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bring-shrubbery","download_url":"https://codeload.github.com/bring-shrubbery/squircle-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254509478,"owners_count":22082892,"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":["react","solidjs","squircle","squircle-button","svelte","vue"],"created_at":"2024-10-31T02:08:25.393Z","updated_at":"2025-05-16T10:08:30.257Z","avatar_url":"https://github.com/bring-shrubbery.png","language":"TypeScript","funding_links":["https://github.com/sponsors/bring-shrubbery"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./content/squircle-js-logo.png\" width=\"420px\" alt=\"SquircleJS\" /\u003e\n\u003c/p\u003e\n\n\u003c!-- \u003ch1 align=\"center\"\u003eSquircleJS\u003c/h1\u003e --\u003e\n\u003cp align=\"center\"\u003e\n  This project aims to bring the iOS-style squircle to your front-end projects.\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://squircle.js.org/\"\u003e📕 Documentation\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/bring-shrubbery/squircle-js\"\u003e\n    \u003cimg alt=\"GitHub Repo stars\" src=\"https://img.shields.io/github/stars/bring-shrubbery/squircle-js?style=flat\u0026logo=github\u0026color=%230B0F14\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@squircle-js/react\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dm/%40squircle-js/react?style=flat\u0026logo=npm\u0026color=%230B0F14\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n- 💃 Responsive squircle element that can be used any an intrinsic component.\n- 🙏 Fallback solution for No-JavaScript.\n- 👌 CommonJS and ES6 (tree-shakeable).\n- 🚀 Available for React (with `react@18` support), with other frameworks coming later.\n- 🐁 Just `2.1kB` gzipped.\n- 🧨 Documented usage examples.\n\n### Drawbacks\n\n- Uses JavaScript to apply corner smoothing (no way to do it with CSS only for now).\n- Does not currently support `border-width`. Works great with just background color.\n\n## What the 🤡 is a Squircle???\n\nThis is a valid question and not everyone is aware of what a Squircle is.\n\u003cq\u003eA squircle is an intermediate shape between a square and a circle\u003c/q\u003e - [Webflow Blog](https://webflow.com/blog/squircle-vs-rounded-squares).\nIf you've ever seen an iPhone home screen, you've seen a squircle.\nWhen you add additional corner smoothing to a regular rectangle with rounded corners, you get a squircle.\nIt's a [long story](https://www.figma.com/blog/desperately-seeking-squircles/), but in short - you can't achieve Squircles in plain CSS, we have to do extra calculations for that, which is where the [figma-squircle](https://github.com/phamfoo/figma-squircle) package comes in. Building on top of that package, this project adds bindings for UI libraries that make it possible to use it just like a regular html component, without worrying about layout-specific things.\n\nVisually, [this post from Figma Blog](https://www.figma.com/blog/desperately-seeking-squircles/) shows the difference really well:\n\n![preview-example](https://github.com/bring-shrubbery/squircle-js/assets/29360707/e64bacb9-9881-476b-9064-01a72df06a9e)\n\n## Usage\n\n### With React\n\n#### Step 1\n\nStar this repo ❤️ and follow [Antoni on Bsky](https://bsky.app/profile/bring-shrubbery.bsky.social)\n\n#### Step 2\n\nInstall the package\n\n```bash\npnpm add @squircle-js/react\n```\n\n#### Step 3\n\nAdd to your project\n\n```tsx\nimport { Squircle } from \"@squircle-js/react\";\n\nconst YourComponent = () =\u003e {\n  return (\n    \u003cSquircle\n      cornerRadius={10}\n      cornerSmoothing={1}\n      className=\"bg-black p-4 text-white\"\n    \u003e\n      Squircle!\n    \u003c/Squircle\u003e\n  );\n};\n```\n\nAlso, add a global component to ensure it still works when JavaScript is disabled.\n\n```tsx\n// _app.tsx, or root-level layout.tsx\nimport { SquircleNoScript } from \"@squircle-js/react\";\n\n...\n\u003cSquircleNoScript /\u003e\n...\n```\n\n## Contributing\n\nRead [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Websites using it\n\n- [quassum.com](https://quassum.com/?utm_source=squircle-js)\n\n## Author\n\nPlease consider following this project's author, Antoni Silvestrovič on [Github](https://github.com/bring-shrubbery) or [Bluesky](https://bsky.app/profile/bring-shrubbery.bsky.social), or by starring the project to show your ❤️ and support.\n\n## License\n\nThis project is licensed under [MIT License](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbring-shrubbery%2Fsquircle-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbring-shrubbery%2Fsquircle-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbring-shrubbery%2Fsquircle-js/lists"}