████████╗███████╗████████╗██████╗  █████╗ ██╗  ██╗
 ╚══██╔══╝██╔════╝╚══██╔══╝██╔══██╗██╔══██╗╚██╗██╔╝
    ██║   █████╗     ██║   ██████╔╝███████║ ╚███╔╝ 
    ██║   ██╔══╝     ██║   ██╔══██╗██╔══██║ ██╔██╗ 
    ██║   ███████╗   ██║   ██║  ██║██║  ██║██╔╝ ██╗
    ╚═╝   ╚══════╝   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝
 ──────────────────────────────────────────────────
   [⚡] SQUIRCLE SDK    : @tetrax/squircle
   [⚡] CREATED BY      : Tushar Temgire
   [⚡] GITHUB          : https://github.com/TusharTemgire
 ──────────────────────────────────────────────────

@tetrax/squircle

Universal Squircle Toolkit for Web, Mobile, Desktop, and Canvas.
Effortlessly render Figma-accurate, Apple-grade, and Zomato-smooth squircle rounded corners with first-class components and drop-in Tailwind CSS classes.

Quick Start (30 Seconds)

1. Install

npm install @tetrax/squircle
# or
yarn add @tetrax/squircle
# or
pnpm add @tetrax/squircle

2. Use in React / Next.js

Import <Squircle> and helper utilities directly from "@tetrax/squircle":

import { Squircle, computeZSquircleRadius } from "@tetrax/squircle";

export default function App() {
  // Optional: compute effective curve radius for dynamic layout indicators
  const effectiveRadius = computeZSquircleRadius(16, 40);

  return (
    <Squircle className="p-6 rounded-squircle-16 squircle-z squircle-border border-amber-500/40 bg-zinc-900 text-white">
      <h2 className="font-bold">Zomato-Style Squircle Card</h2>
      <p className="text-zinc-400 text-sm">Buttery-smooth rounded corners without clipped borders.</p>
      <span className="text-xs text-amber-400 font-mono mt-2 block">
        Effective curve: {effectiveRadius.toFixed(1)}px
      </span>
    </Squircle>
  );
}

The 3 Squircle Styles at a Glance

Choose the squircle style that matches your design:

| Style | Tailwind Class | React / Native Prop | Visual Look | Best For | |---|---|---|---|---| | Z-Squircle (Recommended) | squircle-z | zSquircle | Ultra-soft, organic curves (Zomato & Blinkit look) | Modern mobile apps, cards, buttons, badges | | Figma Standard | (default) | (default) | 1:1 match with Figma's corner smoothing slider | Design-system fidelity matching Figma mockups | | Apple G2 | squircle-g2 | g2Continuous | Seamless curvature transition with zero visible seam | Hero sections, Apple-grade UI, app icons |

Quick Cheat Sheet: All Squircle Shapes

| Shape Type | Tailwind Class | React / Native Prop | Preview / Use Case | |---|---|---|---| | Uniform | rounded-squircle-16 | cornerRadius={16} | All 4 corners rounded equally | | Full Pill / Circle | rounded-squircle-full | cornerRadius={9999} | Automatic pill buttons or circular avatars | | Top Corners | rounded-squircle-t-24 | topLeftCornerRadius={24} topRightCornerRadius={24} | Bottom sheets, drawers, tabs | | Bottom Corners | rounded-squircle-b-24 | bottomLeftCornerRadius={24} bottomRightCornerRadius={24} | Dropdown menus, header banners | | Left Edge | rounded-squircle-l-20 | topLeftCornerRadius={20} bottomLeftCornerRadius={20} | Docked sidebar tabs, segment buttons | | Right Edge | rounded-squircle-r-20 | topRightCornerRadius={20} bottomRightCornerRadius={20} | Floating tabs, action drawers | | Asymmetric Leaf | rounded-squircle-tl-32 rounded-squircle-br-32 | topLeftCornerRadius={32} bottomRightCornerRadius={32} | Organic leaf cards and creative badges | | Overlay Border | squircle-border border-amber-500 | squircleBorder borderColor="#f59e0b" | Clean squircle stroke without clip-path cutoff | | Custom Smoothing | corner-smoothing-60 | cornerSmoothing={0.6} | iOS standard 60% smoothness |

Platform Setup Guides

Platform 1: React Native (iOS & Android)

Powered by @tetrax/squircle/react-native and react-native-svg. Works in Expo (Go & prebuild) and Bare React Native.

Step 1: Install Dependencies

# In your React Native project:
npm install @tetrax/squircle react-native-svg

# If using Expo:
npx expo install react-native-svg

# If using Bare React Native (iOS):
cd ios && pod install && cd ..

Step 2: Import & Use <SquircleNative>

<SquircleNative> supports both Tailwind CSS / NativeWind classes (className) and explicit props. You can use Tailwind classes directly without writing inline CSS styles!

Option A: Using Tailwind CSS / NativeWind Classes (className)

import React from "react";
import { View, Text, Pressable, ScrollView } from "react-native";
import { SquircleNative } from "@tetrax/squircle/react-native";

export default function MobileScreen() {
  return (
    <ScrollView className="flex-1 bg-zinc-950 p-5">
      
      {/* 1. Z-Squircle Card with Inset Border */}
      <SquircleNative className="p-5 rounded-squircle-24 squircle-z squircle-border border-dashed border-amber-500/40 bg-zinc-900">
        <Text className="text-lg font-bold text-white">Zomato Style Card</Text>
        <Text className="text-zinc-400 text-sm mt-1">Organic, soft squircle on iOS and Android with Tailwind.</Text>
      </SquircleNative>

      {/* 2. Asymmetric Bottom Sheet (Top Corners Rounded, Bottom Square) */}
      <SquircleNative className="mt-4 p-5 rounded-squircle-t-32 rounded-squircle-b-0 squircle-z bg-zinc-800">
        <Text className="text-lg font-bold text-white">Bottom Sheet Drawer</Text>
        <Text className="text-zinc-400 text-sm mt-1">Top corners squircled; bottom corners flush.</Text>
      </SquircleNative>

      {/* 3. Full Pill Action Button */}
      <Pressable onPress={() => alert("Button Pressed!")} className="mt-4">
        <SquircleNative className="py-3.5 px-7 items-center rounded-squircle-full squircle-z bg-amber-500">
          <Text className="text-black font-bold text-base">Confirm Order</Text>
        </SquircleNative>
      </Pressable>

      {/* 4. Apple G2 Continuous Card */}
      <SquircleNative className="mt-4 p-5 rounded-squircle-20 squircle-g2 squircle-border border-indigo-400 bg-indigo-950">
        <Text className="text-lg font-bold text-white">Apple G2 Style</Text>
        <Text className="text-indigo-300 text-sm mt-1">Seamless curvature transitions.</Text>
      </SquircleNative>

      {/* 5. Circular Squircle Avatar */}
      <SquircleNative className="mt-4 w-14 h-14 items-center justify-center rounded-squircle-full squircle-z bg-amber-500">
        <Text className="text-black font-bold text-lg">JD</Text>
      </SquircleNative>

    </ScrollView>
  );
}

Option B: Using Explicit Props & StyleSheet

import React from "react";
import { View, Text, StyleSheet, Pressable, ScrollView } from "react-native";
import { SquircleNative } from "@tetrax/squircle/react-native";

export default function MobileScreen() {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      
      {/* 1. Z-Squircle Card with Inset Border */}
      <SquircleNative
        cornerRadius={24}
        zSquircle
        squircleBorder
        borderColor="rgba(245, 158, 11, 0.4)"
        borderWidth={1.5}
        backgroundColor="#18181b"
        style={styles.card}
      >
        <Text style={styles.title}>Zomato Style Card</Text>
        <Text style={styles.subtitle}>Organic, soft squircle on iOS and Android.</Text>
      </SquircleNative>

      {/* 2. Asymmetric Bottom Sheet (Top Corners Rounded, Bottom Square) */}
      <SquircleNative
        topLeftCornerRadius={32}
        topRightCornerRadius={32}
        bottomLeftCornerRadius={0}
        bottomRightCornerRadius={0}
        zSquircle
        backgroundColor="#27272a"
        style={[styles.card, { marginTop: 16 }]}
      >
        <Text style={styles.title}>Bottom Sheet Drawer</Text>
        <Text style={styles.subtitle}>Top corners squircled; bottom corners flush.</Text>
      </SquircleNative>

      {/* 3. Full Pill Action Button */}
      <Pressable onPress={() => alert("Button Pressed!")} style={{ marginTop: 16 }}>
        <SquircleNative
          cornerRadius={9999}
          zSquircle
          backgroundColor="#f59e0b"
          style={{ paddingVertical: 14, paddingHorizontal: 28, alignItems: "center" }}
        >
          <Text style={{ color: "#000000", fontWeight: "bold", fontSize: 16 }}>
            Confirm Order
          </Text>
        </SquircleNative>
      </Pressable>

      {/* 4. Apple G2 Continuous Card */}
      <SquircleNative
        cornerRadius={20}
        g2Continuous
        backgroundColor="#1e1b4b"
        squircleBorder
        borderColor="#818cf8"
        borderWidth={1}
        style={[styles.card, { marginTop: 16 }]}
      >
        <Text style={styles.title}>Apple G2 Style</Text>
        <Text style={styles.subtitle}>Seamless curvature transitions.</Text>
      </SquircleNative>

      {/* 5. Circular Squircle Avatar */}
      <SquircleNative
        cornerRadius={9999}
        zSquircle
        backgroundColor="#f59e0b"
        style={{ width: 56, height: 56, alignItems: "center", justifyContent: "center", marginTop: 16 }}
      >
        <Text style={{ color: "#000000", fontWeight: "bold", fontSize: 18 }}>JD</Text>
      </SquircleNative>

    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    backgroundColor: "#09090b",
    padding: 20,
    justifyContent: "center",
  },
  card: {
    padding: 20,
    width: "100%",
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#ffffff",
  },
  subtitle: {
    fontSize: 13,
    color: "#a1a1aa",
    marginTop: 4,
  },
});

Platform 2: Next.js & React (Web Apps)

Works with Next.js 13/14/15 (App Router & Pages Router), Vite, Remix, and Astro.

Step 1: Install

npm install @tetrax/squircle

Step 2: Use in Next.js Components

// app/page.tsx
"use client";

import { Squircle, computeZSquircleRadius } from "@tetrax/squircle";

export default function Page() {
  const cardRadius = 16;
  const maxBudget = 40; // half of container height
  const effectiveCurve = computeZSquircleRadius(cardRadius, maxBudget);

  return (
    <div className="p-8 space-y-6 bg-black min-h-screen text-white">
      
      {/* 1. Z-Squircle Card with Semi-Transparent Border */}
      <Squircle className="p-6 rounded-squircle-24 squircle-z squircle-border border-amber-500/40 bg-zinc-900 max-w-md">
        <h3 className="font-bold text-lg">Z-Squircle Card</h3>
        <p className="text-zinc-400 text-sm mt-1">Soft, continuous curve styling.</p>
      </Squircle>

      {/* 2. Dynamic Card with computeZSquircleRadius */}
      <div className="max-w-md">
        <Squircle className="p-5 rounded-squircle-16 squircle-z squircle-border border-gray-600/30 bg-[#161616]">
          <div className="flex justify-between items-center">
            <span className="font-semibold text-sm">Dynamic Z-Squircle</span>
            <span className="text-xs font-mono text-amber-400 bg-amber-400/10 px-2 py-0.5 rounded border border-amber-400/20">
              Curve: {effectiveCurve.toFixed(1)}px
            </span>
          </div>
          <p className="text-xs text-zinc-400 mt-2">Calculated using computeZSquircleRadius({cardRadius}, {maxBudget}).</p>
        </Squircle>
      </div>

      {/* 3. Squircle Button with Hover Effect */}
      <Squircle
        as="button"
        className="px-6 py-3 rounded-squircle-12 hover:rounded-squircle-18 squircle-z bg-amber-500 hover:bg-amber-400 text-black font-semibold cursor-pointer transition-all active:scale-95"
      >
        Action Button
      </Squircle>

      {/* 4. Squircle Input Field */}
      <div className="max-w-md">
        <Squircle
          as="input"
          type="text"
          placeholder="Search restaurant or dish..."
          className="w-full px-4 py-3 rounded-squircle-14 squircle-z squircle-border border-zinc-700 bg-zinc-900 text-white placeholder-zinc-500 outline-none focus:border-amber-500"
        />
      </div>

      {/* 5. Asymmetric Leaf Badge */}
      <Squircle className="p-4 rounded-squircle-tl-24 rounded-squircle-br-24 rounded-squircle-tr-6 rounded-squircle-bl-6 squircle-z bg-emerald-950 text-emerald-300 font-semibold inline-block">
        Special Offer
      </Squircle>

    </div>
  );
}

Optional: SSR Fallback (layout.tsx)

Place <SquircleNoScript /> once in your root layout to gracefully provide fallback rounded corners if JavaScript is disabled:

// app/layout.tsx
import { SquircleNoScript } from "@tetrax/squircle/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <SquircleNoScript />
      </head>
      <body>{children}</body>
    </html>
  );
}

Platform 3: Vanilla HTML & CSS (Zero React)

You can use squircle Tailwind classes directly on plain HTML elements without React.

Step 1: Initialize the Observer Once

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.tailwindcss.com"></script>
  <script type="module">
    import { initGlobalSquircleObserver } from "./node_modules/@tetrax/squircle/dist/index.mjs";
    initGlobalSquircleObserver();
  </script>
</head>
<body class="bg-zinc-950 text-white p-8 space-y-6">

  <!-- 1. Normal Container -->
  <div class="p-6 rounded-squircle-24 squircle-z squircle-border border-amber-500/40 bg-zinc-900 max-w-sm">
    <h3 class="font-bold">Vanilla HTML Squircle</h3>
    <p class="text-zinc-400 text-sm mt-1">Automatically clipped using MutationObserver.</p>
  </div>

  <!-- 2. Native Input Element -->
  <input
    type="text"
    placeholder="Search anything..."
    class="w-full max-w-sm px-4 py-2.5 rounded-squircle-12 squircle-z squircle-border border-zinc-700 bg-zinc-900 text-white block"
  />

  <!-- 3. Image Element -->
  <img
    src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&q=80"
    alt="Sample"
    class="w-72 h-40 object-cover rounded-squircle-20 squircle-z block"
  />

</body>
</html>

Platform 4: Tauri Desktop (macOS, Windows, Linux)

Tauri uses the system's native webview. @tetrax/squircle automatically outputs dual -webkit-clip-path and clip-path styles for 100% desktop webview compatibility.

Step 1: Configure Window in src-tauri/tauri.conf.json

{
  "app": {
    "windows": [
      {
        "title": "Desktop App",
        "width": 960,
        "height": 640,
        "transparent": true,
        "decorations": false
      }
    ]
  }
}

Step 2: Build a Frameless Squircle Desktop Window

import { Squircle } from "@tetrax/squircle/react";

export function DesktopWindow() {
  return (
    // Outer window frame with squircle corners and border
    <Squircle className="w-screen h-screen rounded-squircle-24 squircle-z squircle-border border-white/10 bg-[#0e0e12] text-white flex flex-col overflow-hidden">
      
      {/* Draggable Titlebar */}
      <header
        data-tauri-drag-region
        className="h-10 px-4 border-b border-white/10 flex items-center justify-between select-none"
      >
        <span className="text-xs font-semibold text-zinc-400">Desktop Client</span>
        <div className="flex items-center gap-2">
          <button className="w-3 h-3 rounded-full bg-amber-500/80" />
          <button className="w-3 h-3 rounded-full bg-red-500/80" />
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 p-6">
        <Squircle className="p-6 rounded-squircle-16 squircle-z bg-zinc-900 border border-white/5">
          <h2 className="font-bold">Hardware-Accelerated Squircle</h2>
          <p className="text-zinc-400 text-sm mt-1">Runs smoothly on macOS, Windows, and Linux.</p>
        </Squircle>
      </main>

    </Squircle>
  );
}

Platform 5: Electron Desktop (Chromium + Node)

Step 1: Configure BrowserWindow in main.js

const { app, BrowserWindow } = require("electron");

function createWindow() {
  const win = new BrowserWindow({
    width: 1000,
    height: 680,
    transparent: true,
    frame: false,
    hasShadow: true,
  });

  win.loadURL("http://localhost:3000");
}

app.whenReady().then(createWindow);

Step 2: Build the Electron UI

import { Squircle } from "@tetrax/squircle/react";

export function ElectronApp() {
  return (
    <Squircle className="w-screen h-screen rounded-squircle-24 squircle-z squircle-border border-white/10 bg-[#121216] text-white flex flex-col overflow-hidden">
      {/* Drag region for custom header */}
      <div
        style={{ WebkitAppRegion: "drag" } as any}
        className="h-10 px-4 border-b border-white/10 flex items-center justify-between select-none"
      >
        <span className="text-xs font-semibold text-zinc-400">Electron Squircle Window</span>
        <div style={{ WebkitAppRegion: "no-drag" } as any}>
          <button className="text-xs px-2.5 py-1 rounded bg-white/10 hover:bg-white/20">
            Close
          </button>
        </div>
      </div>

      <div className="flex-1 p-8">
        <Squircle className="p-6 rounded-squircle-16 squircle-z bg-zinc-900">
          <h3 className="font-bold">GPU Accelerated</h3>
          <p className="text-zinc-400 text-sm mt-1">Blink engine clips squircle paths effortlessly.</p>
        </Squircle>
      </div>
    </Squircle>
  );
}

Platform 6: HTML5 Canvas 2D & Game Graphics

Use drawSquircleRect from @tetrax/squircle/core to render squircles directly onto an HTML5 Canvas:

import { drawSquircleRect } from "@tetrax/squircle/core";

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// drawSquircleRect(ctx, x, y, width, height, cornerRadius, smoothing?, zSquircle?)

// 1. Z-Squircle Card (Zomato Style)
ctx.beginPath();
drawSquircleRect(ctx, 20, 20, 280, 140, 24, 1.0, true);
ctx.fillStyle = "#18181b";
ctx.fill();
ctx.lineWidth = 1.5;
ctx.strokeStyle = "rgba(245, 158, 11, 0.5)";
ctx.stroke();

// 2. Asymmetric Corners on Canvas
ctx.beginPath();
drawSquircleRect(ctx, 320, 20, 200, 140, { tl: 32, tr: 8, br: 32, bl: 8 }, 1.0, true);
ctx.fillStyle = "#047857";
ctx.fill();

Platform 7: Headless Node.js & SVG Export

Generate standalone .svg vector files or raw path strings without a browser:

import fs from "fs";
import { getSvgPath } from "@tetrax/squircle/core";

// Generate an SVG path string
const width = 400;
const height = 240;
const cornerRadius = 32;

const pathData = getSvgPath({
  width,
  height,
  cornerRadius,
  zSquircle: true,
});

// Save to a standalone .svg vector file
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
  <path d="${pathData}" fill="#18181b" stroke="#f59e0b" stroke-width="2" />
</svg>
`.trim();

fs.writeFileSync("card.svg", svg);
console.log("Squircle SVG generated!");

Tailwind CSS Utility Class Reference

| Category | Class Pattern | Description | |---|---|---| | Radius | rounded-squircle-{0-96} | Corner radius in pixels (e.g. rounded-squircle-16, rounded-squircle-24) | | | rounded-squircle-full | Full pill capsule or perfect circle | | Directional | rounded-squircle-t-{n} | Top corners only | | | rounded-squircle-b-{n} | Bottom corners only | | | rounded-squircle-l-{n} | Left edge only | | | rounded-squircle-r-{n} | Right edge only | | Per-Corner | rounded-squircle-tl-{n} | Top-left corner | | | rounded-squircle-tr-{n} | Top-right corner | | | rounded-squircle-br-{n} | Bottom-right corner | | | rounded-squircle-bl-{n} | Bottom-left corner | | Styles | squircle-z | Zomato/Blinkit soft continuous curvature | | | squircle-g2 | Apple G2 continuous curvature | | | (default) | Figma standard curve | | Smoothing | corner-smoothing-{0-100} | Custom smoothing percentage (e.g. corner-smoothing-60) | | Borders | squircle-border | Enables overlay border (1px default) | | | squircle-border-{width} | Custom border width (e.g. squircle-border-2, squircle-border-1.5) | | | border-dashed | Organic dashed squircle border (e.g. squircle-border border-dashed border-gray-400) | | | border-dotted | Organic dotted squircle border with rounded dots | | | border-dash-[6_4] | Custom dash & gap dimensions (e.g. border-dash-[8_4]) | | | border-{color} | Tailwind color token (e.g. border-amber-500, border-[#b9b9b996]) | | | border-{color}/{opacity} | Tailwind opacity modifier (e.g. border-amber-500/40) | | | border-{width} | Tailwind border width (e.g. border-2, border-4) |

Props Reference

<Squircle> (React / Next.js / Tauri / Electron)

| Prop | Type | Default | Description | |---|---|---|---| | className | string | "" | Tailwind and squircle utility classes | | cornerRadius | number | 0 | Uniform corner radius in px | | topLeftCornerRadius | number | undefined | Top-left corner radius | | topRightCornerRadius | number | undefined | Top-right corner radius | | bottomRightCornerRadius | number | undefined | Bottom-right corner radius | | bottomLeftCornerRadius | number | undefined | Bottom-left corner radius | | zSquircle | boolean | false | Enable Zomato-style curve engine | | g2Continuous | boolean | false | Enable Apple G2 continuous engine | | cornerSmoothing | number | 1 | Smoothing factor between 0 and 1 | | borderStyle | "solid" \| "dashed" \| "dotted" | "solid" | Border stroke style for squircle borders | | borderDasharray | string | undefined | Custom SVG stroke dash pattern (e.g. "6 4") | | borderWidth | number | 1 | Border width in px | | borderColor | string | "currentColor" | Stroke border color | | as | ElementType | "div" | HTML tag to render (e.g. "button", "input") |

<SquircleNative> (React Native)

| Prop | Type | Default | Description | |---|---|---|---| | cornerRadius | number | 0 | Uniform corner radius in dp | | topLeftCornerRadius | number | undefined | Top-left radius in dp | | topRightCornerRadius | number | undefined | Top-right radius in dp | | bottomRightCornerRadius | number | undefined | Bottom-right radius in dp | | bottomLeftCornerRadius | number | undefined | Bottom-left radius in dp | | zSquircle | boolean | false | Enable Zomato-style curve engine | | g2Continuous | boolean | false | Enable Apple G2 continuous engine | | squircleBorder | boolean | false | Show squircle stroke border | | borderStyle | "solid" \| "dashed" \| "dotted" | "solid" | Border stroke style ("dashed", "dotted", etc.) | | borderDasharray | string \| number[] | undefined | Custom stroke dash pattern (e.g. [6, 4]) | | borderColor | string | "transparent" | Stroke border color | | borderWidth | number | 1 | Stroke border width in dp | | backgroundColor | string | undefined | Fill color for the squircle body | | style | ViewStyle | undefined | Additional React Native styles |

Single-Import Helpers (@tetrax/squircle)

You can import the <Squircle> component and all core helper utilities together from the root "@tetrax/squircle" package:

import {
  Squircle,                   // Primary React Component
  computeZSquircleRadius,     // Calculate effective curve radius for dynamic layout badges
  getSvgPath,                 // Generate SVG path 'd' string for any width/height
  computeSquirclePath,        // Quick SVG path string helper
  drawSquircleRect,           // Direct HTML5 Canvas 2D drawing function
  parseSquircleClasses,       // Extract radius, border, and styles from Tailwind classes
  initGlobalSquircleObserver, // Activate DOM observer for vanilla HTML elements
  SquircleNoScript,           // React SSR fallback component
} from "@tetrax/squircle";

computeZSquircleRadius(cornerRadius, maxBudget)

Computes the effective curve radius in pixels.

• cornerRadius (number): The requested corner radius (e.g. 16).
• maxBudget (number): Half of the minimum element dimension ($\min(\text{width}, \text{height}) / 2$, e.g. 40 for an 80px element).
• Returns (number): The actual curve radius (e.g. 24.4). Great for dynamic UI cards, live indicators, or syncing child elements.

FAQ & Quick Tips

1. Why do my borders look clipped?

Fix: Do not use plain CSS border. Standard borders are clipped by the element's clip-path. Always use squircle-border (e.g. squircle-border border-amber-500/40), which renders an inset vector stroke positioned safely inside the clip-path.

2. How do I apply drop shadows?

Fix: Because clip-path cuts off standard box-shadow, place a drop shadow on a parent wrapper using Tailwind's drop-shadow-* or CSS filter: drop-shadow(...):

<div class="drop-shadow-xl">
  <Squircle className="rounded-squircle-20 squircle-z bg-zinc-900 p-6">
    Shadow Content
  </Squircle>
</div>

3. How do I squircle an <input> or <img>?

Fix: Use <Squircle as="input" />, or simply apply classes directly in standard HTML:

<input class="rounded-squircle-12 squircle-z squircle-border border-zinc-700 bg-zinc-900 px-4 py-2 text-white" />

⚡ Creator & Maintainer

 ████████╗██╗   ██╗███████╗██╗  ██╗ █████╗ ██████╗ 
 ╚══██╔══╝██║   ██║██╔════╝██║  ██║██╔══██╗██╔══██╗
    ██║   ██║   ██║███████╗███████║███████║██████╔╝
    ██║   ██║   ██║╚════██║██╔══██║██╔══██║██╔══██╗
    ██║   ╚██████╔╝███████║██║  ██║██║  ██║██║  ██║
    ╚═╝    ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝

 ████████╗███████╗███╗   ███╗ ██████╗ ██╗██████╗ ███████╗
 ╚══██╔══╝██╔════╝████╗ ████║██╔════╝ ██║██╔══██╗██╔════╝
    ██║   █████╗  ██╔████╔██║██║  ███╗██║██████╔╝█████╗  
    ██║   ██╔══╝  ██║╚██╔╝██║██║   ██║██║██╔══██╗██╔══╝  
    ██║   ███████╗██║ ╚═╝ ██║╚██████╔╝██║██║  ██║███████╗
    ╚═╝   ╚══════╝╚═╝     ╚═╝ ╚═════╝ ╚═╝╚═╝  ╚═╝╚══════╝

• Author: Tushar Temgire
• GitHub: https://github.com/TusharTemgire
• Organization: Tetrax-CPaaS

License

MIT © Tushar Temgire • Tetrax