{"id":33897277,"url":"https://github.com/imskyleen/squircle","last_synced_at":"2026-05-30T22:31:57.028Z","repository":{"id":291148603,"uuid":"976748271","full_name":"imskyleen/squircle","owner":"imskyleen","description":"A library for creating beautiful squircles in CSS, offering full customization and seamless integration as well as Tailwind CSS integration.","archived":false,"fork":false,"pushed_at":"2025-05-02T17:28:55.000Z","size":898,"stargazers_count":32,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-12-12T20:51:31.792Z","etag":null,"topics":["css","squircle","squircles","tailwindcss"],"latest_commit_sha":null,"homepage":"https://squircle.skyleen.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imskyleen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-05-02T17:15:05.000Z","updated_at":"2025-12-07T00:34:00.000Z","dependencies_parsed_at":"2025-05-02T18:39:42.439Z","dependency_job_id":null,"html_url":"https://github.com/imskyleen/squircle","commit_stats":null,"previous_names":["imskyleen/squircle"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/imskyleen/squircle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imskyleen%2Fsquircle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imskyleen%2Fsquircle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imskyleen%2Fsquircle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imskyleen%2Fsquircle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imskyleen","download_url":"https://codeload.github.com/imskyleen/squircle/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imskyleen%2Fsquircle/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33712579,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-30T02:00:06.278Z","response_time":92,"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":["css","squircle","squircles","tailwindcss"],"created_at":"2025-12-11T19:07:22.789Z","updated_at":"2026-05-30T22:31:57.021Z","avatar_url":"https://github.com/imskyleen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Squircle\n\nA simple and flexible way to make Squircles with CSS.\n\n## Documentation\n\n[See full documentation here.](https://squircle.skyleen.dev)\n\n## Installation\n\n```bash\nnpm install @squircle/core @squircle/paint-polyfill\n```\n\n## Import\n\n```ts\nimport { init } from '@squircle/core';\n```\n\n## Initialize\n\n```ts\ninit();\n```\n\n## Initialize in React\n\n```tsx title=\"squircle-provider.tsx\"\n'use client';\n\nimport * as React from 'react';\nimport { init } from '@squircle/core';\n\nexport function SquircleProvider({ children }: { children: React.ReactNode }) {\n  React.useEffect(() =\u003e void init(), []);\n  return children;\n}\n```\n\nThen use the `SquircleProvider` component to wrap your app.\n\n```tsx\n\u003cSquircleProvider\u003e\n  \u003cApp /\u003e\n\u003c/SquircleProvider\u003e\n```\n\n## Usage\n\n### CSS\n\n```css\n.squircle {\n  background: paint(squircle);\n  --squircle-background-color: red;\n  --squircle-border-color: blue;\n  --squircle-border-width: 10px;\n  --squircle-border-radius: 30px;\n}\n```\n\n### Tailwind CSS\n\n**Only support Tailwind \u003e= 4.0.**\n\n### Import\n\n```css title=\"globals.css\"\n@import '@squircle/tailwindcss';\n```\n\n### Use\n\n```html\n\u003cdiv class=\"squircle squircle-2xl squircle-teal-400\" /\u003e\n```\n\n## Beta phase\n\nSquircle is in beta phase, so there may be bugs and optimization issues for browsers not compatible with `CSS.paintWorklet`.\n\n## Limitations\n\nWhile Squircle is designed to work seamlessly across all modern browsers, there are a few limitations to keep in mind:\n\n- Squircle uses a custom polyfill, `@squircle/paint-polyfill`, a heavily improved fork of `css-paint-polyfill`.\n  This polyfill brings CSS Houdini compatibility to browsers that do not support `CSS.paintWorklet` natively.\n\n- However, **very old browsers**, such as **Internet Explorer** and **some early versions of Edge**, are not supported. These browsers do not support the necessary underlying APIs to run the polyfill reliably.\n  _(Note: Internet Explorer is not officially tested and should be considered unsupported.)_\n\n- In browsers without native CSS Houdini support (thus relying on `@squircle/paint-polyfill`), there may be **minor performance overhead**.\n  This is because the polyfill **actively listens** to style changes and dynamically **replaces paint operations** in the DOM, which can slightly impact performance, especially in large or highly dynamic applications.\n\n⚠ Additionally, when using animation libraries such as [Motion](https://motion.dev/) in browsers that do not support `CSS.paintWorklet` (**Firefox** and **Safari**), performance issues may become more noticeable.\nSince the polyfill relies on a MutationObserver to detect and respond to style changes, animations that rapidly and repeatedly update styles can trigger frequent DOM updates, potentially resulting in less smooth animations.\nWe are currently exploring solutions to mitigate this impact.\n\n## Issues\n\nIf you encounter any problems, do not hesitate to [open an issue](https://github.com/imskyleen/squircle/issues) or [make a PR here](https://github.com/imskyleen/squircle).\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimskyleen%2Fsquircle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimskyleen%2Fsquircle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimskyleen%2Fsquircle/lists"}