@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

Installation

``bash
npm install @cornerkit/react @cornerkit/core
`

Quick Start

$3

`tsx
import { Squircle } from '@cornerkit/react';

function App() {
return (



Squircle content



);
}
`

$3

`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 (



);
}
`

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.0

License

MIT