Corner Handles

Utility directive for adding blueprint corner handles to any component, container, or custom surface.

01 Hero Preview

Grid: 8px · Scale: 1:1

UtilityAttach anywhere

Panels, previews, and product containers can opt into corner handles directly.

02 Usage

import { FrCornerHandles } from '@frame-ui-ng/components';

HTML

<section frCornerHandles class="product-panel">
  <h3>Release channel</h3>
  <p>Attach corner handles to any regular box element.</p>
</section>

03 Examples

Basic

Apply the directive to any host element that should opt into blueprint corner handles.

Component Sheet

Grid: 8px · Scale: 1:1

UtilityAttach anywhere

Panels, previews, and product containers can opt into corner handles directly.

Action Surface

Attach the utility to compact surfaces such as action groups when they should receive the same blueprint treatment.

Component Sheet

Grid: 8px · Scale: 1:1

Container

The utility is useful for docs previews, custom cards, tool surfaces, and app containers that are not Frame UI components.

Component Sheet

Grid: 8px · Scale: 1:1

BlueprintContainer host

Surfacecustom

Scopelocal

Handlesenabled

04 Custom Styling

Override the corner handle tokens locally when a host needs a different accent, inset, or handle length.

Component Sheet

Grid: 8px · Scale: 1:1

Custom tokensRelease frame

Local token overrides tune color, inset, and visible handle length.

06 Design Tokens

Use these CSS custom properties on any host with frCornerHandles to tune the local handle treatment.

SCSS


  --frame-corner-handle-size: var(--frame-frame-tick-size, 0.375rem);
  --frame-corner-handle-inset: 0px;
  --frame-corner-handle-color: var(--frame-frame-accent);
  --frame-corner-handle-radius: var(--frame-radius);