{"repo":"bring-shrubbery/squircle-js","free":true,"listed":false,"github":"https://github.com/bring-shrubbery/squircle-js","clone":"git clone https://github.com/bring-shrubbery/squircle-js.git","description":"A squircle element for your favourite frontend framework!","language":"MDX","stars":315,"topics":["react","solidjs","squircle","squircle-button","svelte","vue"],"license":"MIT","category":"mobile-apps","readme_excerpt":"This project aims to bring the iOS-style squircle to your front-end projects. 📕 Documentation Features - 💃 Responsive squircle element that can be used any an intrinsic component. - 🙏 Fallback solution for No-JavaScript. - 👌 CommonJS and ES6 (tree-shakeable). - 🚀 Available for React, Vue, Svelte, and Solid (see the framework support table below). - 🐁 Just 2.1kB gzipped. - 🧨 Documented usage examples. Drawbacks - Uses JavaScript to apply corner smoothing (no way to do it with CSS only for now). - Does not currently support border-width . Works great with just background color. What the 🤡 is a Squircle??? This is a valid question and not everyone is aware of what a Squircle is. A squircle is an intermediate shape between a square and a circle - Webflow Blog. If you've ever seen an iPhone home screen, you've seen a squircle. When you add additional corner smoothing to a regular rectangle with rounded corners, you get a squircle. It's a long story, 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 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. Visually, this post from Figma Blog shows the difference really well: Framework support Package npm Framework --- --- --- @squircle-js/react @squircle-js/react React 16.8+ @squircle-js/soli","default_branch":null,"files":null,"tree":[],"storefront":"/r/bring-shrubbery","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/bring-shrubbery/squircle-js/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}