{"id":50177005,"url":"https://github.com/longnguyen245/solid-corner-smoothing","last_synced_at":"2026-05-27T02:00:44.743Z","repository":{"id":65513400,"uuid":"593639105","full_name":"longnguyen245/solid-corner-smoothing","owner":"longnguyen245","description":"This is a component package used to create smooth curved corners for solidJS. You can use it easily for basic tags or a solid-styled-components.","archived":false,"fork":false,"pushed_at":"2025-09-26T00:36:10.000Z","size":3070,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-25T05:29:26.784Z","etag":null,"topics":["solid","solid-start","solidjs"],"latest_commit_sha":null,"homepage":"","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/longnguyen245.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,"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-01-26T14:06:04.000Z","updated_at":"2026-02-05T16:26:56.000Z","dependencies_parsed_at":"2023-07-06T19:45:39.378Z","dependency_job_id":"c0e754a4-9956-47ac-b1a6-3e47ddd25d9f","html_url":"https://github.com/longnguyen245/solid-corner-smoothing","commit_stats":null,"previous_names":["longluuly/solid-corner-smoothing","nguyenvanlongweb/solid-corner-smoothing","long5436/solid-corner-smoothing","vanlongluuly/solid-corner-smoothing"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/longnguyen245/solid-corner-smoothing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/longnguyen245%2Fsolid-corner-smoothing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/longnguyen245%2Fsolid-corner-smoothing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/longnguyen245%2Fsolid-corner-smoothing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/longnguyen245%2Fsolid-corner-smoothing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/longnguyen245","download_url":"https://codeload.github.com/longnguyen245/solid-corner-smoothing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/longnguyen245%2Fsolid-corner-smoothing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33546836,"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-27T02:00:06.184Z","response_time":53,"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":["solid","solid-start","solidjs"],"created_at":"2026-05-25T05:00:53.270Z","updated_at":"2026-05-27T02:00:44.735Z","avatar_url":"https://github.com/longnguyen245.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Solid corner smoothing\n\nThis is a component package used to create smooth curved corners for solidJS. You can use it easily for basic tags or a solid-styled-components.\n\nFrom version 0.2.0 will support solid-start and the documentation has been changed\n\n# [:point_right: Link demo](https://long5436.github.io/solid-corner-smoothing/)\n\n![demo image](./preview//img1.png)\n![demo image](./preview//img2.png)\n\n![demo image](./preview//img4.png)\n![demo image](./preview//img3.png)\n\n## Installation\n\n```bash sh\nnpm install solid-corner-smoothing\npnpm install solid-corner-smoothing\nyarn add solid-corner-smoothing\n```\n\n## Usage\n\n### Import\n\n```js\nimport SolidCornerSmoothing from 'solid-corner-smoothing';\n```\n\n### Basic\n\n```jsx\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cSolidCornerSmoothing\n        class=\"box\"\n        options={{\n          cornerRadius: 40,\n          cornerSmoothing: 0.8,\n          reSize: true,\n          preserveSmoothing: true,\n        }}\n      \u003e\n        This is box\n      \u003c/SolidCornerSmoothing\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n![demo image](./preview//img1.png)\n\n### Using with reactivity\n\nyou can use react and have to enable `reSize` prop to be able to change element state according to it\n\n```jsx\nconst [radius, setRadius] = createSignal(60);\nconst [smoothing, setSmoothing] = createSignal(0.7);\n\nreturn (\n  \u003cdiv\u003e\n    \u003cSolidCornerSmoothing\n      class=\"box\"\n      options={{\n        cornerRadius: radius(),\n        cornerSmoothing: smoothing(),\n        preserveSmoothing: true\n        reSize: true\n      }}\n    \u003e\n      This is box\n    \u003c/SolidCornerSmoothing\u003e\n  \u003c/div\u003e\n);\n```\n\n### Wrapper\n\npass the tag name as a string to the `wrapper` prop that will be used as the root tag\n\n```jsx\nreturn (\n  \u003cdiv\u003e\n    \u003cSolidCornerSmoothing\n      class=\"box\"\n      wrapper=\"form\"\n      options={{ cornerRadius: 60, cornerSmoothing: 0.8 }}\n    \u003e\n      This is box\n    \u003c/SolidCornerSmoothing\u003e\n  \u003c/div\u003e\n);\n```\n\n### Solid-styled-components\n\nYou can also pass a style-components to the wrapper prop to generate the root tag\n\n```jsx\nconst Btn = styled('button')`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 200px;\n  height: 100px;\n  border: none;\n`;\n\nreturn (\n  \u003cdiv\u003e\n    \u003cSolidCornerSmoothing\n      wrapper={Btn}\n      options={{\n        cornerRadius: 30,\n        cornerSmoothing: 0.8,\n        backgroundColor: '#ddd',\n        border {\n          color: \"tomato\",\n          size: 2\n        }\n      }}\n    \u003e\n      This is button\n    \u003c/SolidCornerSmoothing\u003e\n  \u003c/div\u003e\n);\n```\n\n![demo image](./preview//img2.png)\n\n### Use css\n\nBackground color can be used via css or options props, border color can only be passed through options props. (the colors passed options props also accept css variables)\n\n```jsx\nreturn (\n  \u003cdiv\u003e\n    \u003cSolidCornerSmoothing\n      class=\"box\"\n      wrapper=\"button\"\n      options={{\n        cornerRadius: 30,\n        cornerSmoothing: 0.8,\n        preserveSmoothing: true\n        border: {\n          color: \"tomato\",\n          size: 2\n        }\n      }}\n    \u003e\n      This is button\n    \u003c/SolidCornerSmoothing\u003e\n  \u003c/div\u003e\n);\n```\n\n```css\n.box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 200px;\n  height: 100px;\n  background-color: gray;\n}\n```\n\n## Props\n\n| Prop name | Type value             | Description                                                          |\n| --------- | :--------------------- | :------------------------------------------------------------------- |\n| wrapper   | string, Styled Element | Root tag (default is `div`), can also be a `solid-styled-components` |\n| options   | Options                | Where to put options. (required to work)border-radius.               |\n\n### Options\n\n| Prop name               | Type value | Description                                                                                                                                                      |\n| ----------------------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| cornerRadius            | number     | Similar to the CSS property border-radius.                                                                                                                       |\n| topLeftCornerRadius     | number     | Radius each corner                                                                                                                                               |\n| topRightCornerRadius    | number     | Radius each corner                                                                                                                                               |\n| bottomRightCornerRadius | number     | Radius each corner                                                                                                                                               |\n| bottomLeftCornerRadius  | number     | Radius each corner                                                                                                                                               |\n| cornerSmoothing         | number     | The degree of corner smoothing as a number in the range 0–1. 0 is equivalent to no smoothing and looks like normal border-radius. 1 indicates maximal smoothing. |\n| preserveSmoothing       | boolean    | Allow corner smoothing to work better on large rounded corners.                                                                                                  |\n| reSize                  | boolean    | Allows resizing and corners                                                                                                                                      |\n| border.size             | number     | When this prop has a value, it will turn into border mode (need to change the css according to the instructions or use prop `borderColor` and `backgroundColor`) |\n| border.color            | string     | Border color                                                                                                                                                     |\n| backgroundColor         | string     | Background color (can still use css if not using this prop)                                                                                                      |\n| fitBorderWidth          | number     | Add custom angle width parameter to fix visual effects                                                                                                           |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flongnguyen245%2Fsolid-corner-smoothing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flongnguyen245%2Fsolid-corner-smoothing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flongnguyen245%2Fsolid-corner-smoothing/lists"}