Components

Resize Handle

Experimental

Edge and corner grip for resizing a positioned box; the host owns the drag math.

240 × 144

Composition

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/resize-handle.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/resize-handle.json

Primary installed source

src/registry/sources/control-ui/ui/resize-handle.tsx

import type { ComponentProps, CSSProperties } from "react";

import type { ResizeHandleKnobStyle } from "@/components/control-ui/knob-contracts/resize-handle-knobs";

import { cn } from "@/components/control-ui/lib/cn";

export const resizeHandleDirections = ["n", "ne", "e", "se", "s", "sw", "w", "nw"] as const;

export type ResizeHandleDirection = (typeof resizeHandleDirections)[number];

export type ResizeHandleProps = Omit<ComponentProps<"button">, "style"> & {

direction: ResizeHandleDirection;

style?: CSSProperties & ResizeHandleKnobStyle;

};

export function ResizeHandle({ direction, className, ...props }: ResizeHandleProps) {

return (

<button

type="button"

data-control-ui="resize-handle"

data-control-family="resize-handle"

data-slot="root"

data-direction={direction}

className={cn("absolute touch-none", className)}

{...props}

/>

);

}

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-resize-handle-* · 7 knobsHow the cascade resolves

--cui-resize-handle-size<length-percentage>10px

--cui-resize-handle-hit-size<length-percentage>var(--target-min)

--cui-resize-handle-background<color>var(--background)

--cui-resize-handle-hover-background<color>oklch(from var(--primary) l c h / 0.1)

--cui-resize-handle-border-color<color>var(--primary)

--cui-resize-handle-border-width<length>var(--control-rim-width)

--cui-resize-handle-radius<length-percentage>0px