React components and hooks for iOS-style squircle corners
npm install @cornerkit/react



React components and hooks for iOS-style squircle corners. A thin wrapper around @cornerkit/core with full TypeScript support.
Live Demo | GitHub | Core Package
``bash`
npm install @cornerkit/react @cornerkit/core
`tsx
import { Squircle } from '@cornerkit/react';
function App() { Squircle content
return (
);
}
`
`tsx
import { useSquircle } from '@cornerkit/react';
function Card() {
const squircleRef = useSquircle
radius: 20,
smoothing: 0.8,
});
return
API Reference
$3
Declarative component for applying squircle corners to any HTML element.
#### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
radius | number | 20 | Corner radius in pixels |
| smoothing | number | 0.8 | Curve smoothness (0.0-1.0) |
| border | { width: number; color: string } | - | Optional border |
| as | keyof JSX.IntrinsicElements | 'div' | HTML element to render |
| children | ReactNode | - | Child content |
| ref | Ref | - | Forwarded ref |Plus all valid HTML attributes for the chosen element type.
#### Examples
`tsx
// Basic usage
Content // As a button
Click me
// With border
radius={20}
smoothing={0.9}
border={{ width: 2, color: '#3b82f6' }}
>
Styled content
// As an input
as="input"
radius={8}
type="text"
placeholder="Enter text..."
/>
`$3
Imperative hook for applying squircle corners to a ref.
#### Signature
`ts
function useSquircle(
options?: UseSquircleOptions
): RefObject;
`#### Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
|
radius | number | 20 | Corner radius in pixels |
| smoothing | number | 0.8 | Curve smoothness (0.0-1.0) |
| border | { width: number; color: string } | - | Optional border |#### Example
`tsx
function MyCard() {
const squircleRef = useSquircle({
radius: 24,
smoothing: 0.9,
border: { width: 1, color: 'gray' },
}); return (
Card content
);
}
`TypeScript Support
Full TypeScript support with:
- Polymorphic
as prop with proper typing
- Generic type parameter for useSquircle
- IntelliSense for all props and options`tsx
// TypeScript knows this is an HTMLButtonElement
console.log(e.currentTarget)}>
Button
// Type-safe hook usage
const buttonRef = useSquircle({ radius: 16 });
`SSR Compatibility
Both the component and hook are SSR-compatible:
- No DOM access during server render
- Squircle effect applied on client hydration
- Works with Next.js, Remix, Gatsby, etc.
`tsx
// Works in Next.js App Router
export default function Page() {
return (
Server-rendered content with client-side squircle
);
}
`Form Elements
Squircle works with form elements while preserving accessibility:
`tsx
// Input with squircle - focus styles preserved
as="input"
radius={12}
type="text"
placeholder="Email"
className="focus:outline-2 focus:outline-blue-500"
/>// Textarea
Initial text
`Tip: Use
outline for focus styles instead of border since the squircle uses clip-path.Re-exports
For convenience, the package re-exports these from
@cornerkit/core:`ts
import {
DEFAULT_CONFIG, // { radius: 20, smoothing: 0.8 }
RendererTier, // Enum: NATIVE, HOUDINI, CLIPPATH, FALLBACK
} from '@cornerkit/react';
`Peer Dependencies
-
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
- @cornerkit/core`: ^1.1.0MIT