jeremybanka / corners

React component library for dynamically-sized DOM elements with beautiful corners.

---

npm i corners

pnpm add corners

---

Create react components with angled or smooth-rounded corners.

• Features
• API
• Examples

Features

• premade component factories:

  const MyRoundedButton = rounded.button
  

• make your own factory:

  const dogEared = corners(chamfer, null, null, null).size(40)
  const MyDogEaredButton = dogEared.button
  

• CSS clip-path ensures corners are rendered as empty space
• Components may be dynamically sized: a resize observer is used to detect changes to component size and update the clip-path
• Specify the corner size when calling a factory (e.g. rounded.size(10).div)
• Support for drop shadows (e.g. corners(round).options({shadow: {...}}).div)
• Support for positioning elements outside of the target element
• Clipping Paths that are inset (or spread ?) from the target element
• Layers that are inset or spread from the target element
• Simultaneous use of clipping path and layers

API

corners

corners(...cornerFns).with({ cornerSize, useClipPath, above, below }) => ComponentFactory

Creates a new component factory with the given corner functions. The corner functions are applied in the order they are given.

Argument	Type	Required?	Description
cornerFns	Nullable<DrawCorner>[]	Yes	1, 2, or 4 functions that specify the corners for this factory in clockwise order
cornerSize	number	No	Equivalent to N in css border-radius: Npx
useClipPath	boolean	No	true is equivalent to css overflow: hidden
above	Partial<Layer>[]	No	Layers with the same shape as the component, but rendered above the component
below	Partial<Layer>[]	No	Layers with the same shape as the component, but rendered below the component

Returns	Type	Description
ComponentFactory	ComponentFactory	A new component factory with the given corner functions and options applied.

DrawCorner

(p1, p2, idx) => pathPoints

A function that draws a corner

Argument	Type	Required?	Description
p1	{ x: number; y: number; }	Yes	The first point of the corner
p2	{ x: number; y: number; }	Yes	The second point of the corner
idx	number	Yes	The index of the corner. 0 = top right, 1 = bottom right, 2 = bottom left, 3 = top left.

Returns	Type	Description
pathPoints	string[]	svg path commands

Layer

A layer takes the same shape as the component it is applied to.

Property	Type	Required?	Description
color	string	Yes	The color of the layer
x	number	Yes	The x offset of the layer
y	number	Yes	The y offset of the layer
blur	number	Yes	The blur radius of the layer
spread	number	Yes	The spread radius of the layer
stroke	Stroke	No	The stroke of the layer

Examples

Make a "dog-eared" component

 /¯¯¯¯¯¯¯¯¯|
/          |
|          |
|__________|

(it should look like a dog-eared page)

import type { FC } from "react"
import corners, { chamfer } from "corners"

const upperLeftDogeared = corners(null, null, null, chamfer).with({ cornerSize: 20 })

const DogearedDiv = upperLeftDogeared.div

const MyComponent: FC = () => (
  <DogEaredDiv style={{ background: "black" }}>
    Hello, World!
  </DogEaredDiv>
)

Make a "squircled" component with a drop shadow

import type { FC } from "react"
import { rounded } from "corners"

const LAYER: Record<string, Partial<Layer>> = {
  FAINT_SHADOW: { color: `#0003`, spread: -4, blur: 12, y: -4 },
  LIGHT_FILL: { color: `#f3f3f3` },
}
const RoundedSpanWithShadow = rounded.span.with({
  cornerSize: 15,
  below: [LAYER.LIGHT_FILL, LAYER.FAINT_SHADOW],
  useClipPath: false,
})

const MyComponent: FC = () => (
  <RoundedSpanWithShadow>
    Hello, World!
  </RoundedSpanWithShadow>
)

LICENSE

MIT

corners's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	npmlog

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency eslint to v9

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update dependency @react-hook/resize-observer to v2

Detected dependencies

github-actions

.github/workflows/integration.yml

• actions/checkout v4.1.7
• pnpm/action-setup v4.0.0
• actions/setup-node v4.0.3
• actions/checkout v4.1.7
• pnpm/action-setup v4.0.0
• actions/setup-node v4.0.3

.github/workflows/release.yml

• actions/checkout v4
• actions/setup-node v4
• pnpm/action-setup v2
• changesets/action v1

npm

apps/cornersjs.org/package.json

• @emotion/cache 11.11.0
• @emotion/react 11.11.4
• @emotion/styled 11.11.5
• @mdx-js/loader 3.0.1
• @mdx-js/react 3.0.1
• @next/mdx 14.2.5
• fp-ts 2.16.8
• framer-motion 11.3.6
• next 14.2.5
• react 18.3.1
• react-dom 18.3.1
• react-markdown 9.0.1
• react-syntax-highlighter 15.5.0
• @emotion/babel-plugin 11.11.0
• @svgr/webpack 8.1.0
• @types/node 20.14.11
• @types/npmlog 7.0.0
• @types/react 18.3.3
• @types/react-dom 18.3.0
• @types/react-syntax-highlighter 15.5.13
• chokidar 3.6.0
• concurrently 8.2.2
• eslint 8.57.0
• eslint-config-next 14.2.5
• npmlog 7.0.1
• typescript 5.5.3

package.json

• @changesets/cli 2.27.7
• @typescript-eslint/eslint-plugin 7.16.1
• @typescript-eslint/parser 7.16.1
• cross-env 7.0.3
• eslint 8.57.0
• eslint-plugin-import 2.29.1
• prettier 3.3.3
• @biomejs/biome 1.8.3
• tsx 4.16.2
• turbo 2.0.7
• typescript 5.5.3
• vitest 2.0.3
• node 20.15.1
• pnpm 9.5.0

packages/corners/package.json

• @react-hook/resize-observer 1.2.6
• @emotion/react 11.11.4
• @emotion/styled 11.11.5
• @types/react 18.3.3
• @types/react-dom 18.3.0
• c8 10.1.2
• esbuild 0.23.0
• gh-pages 6.1.1
• jsdom 24.1.0
• react 18.3.1
• react-dom 18.3.1
• tsconfig-paths 4.2.0
• tsup 8.1.2
• vite-tsconfig-paths 4.3.2
• vitest 2.0.3
• react >=18.0.0
• react-dom >=18.0.0

nvm

.nvmrc

• node 20.15.1

---

• Check this box to trigger a request for Renovate to run again on this repository