Getting started

Ram (Swedish for “frame”, pronounced , like “rahm”, rhyming with “calm”) is a tiny React component for animated design-tool selection frames around text.

Wrap your text and Ram handles the measurement, selection outline, corner handles and animation.

Installation

Ram ships as ESM and CJS, typed, with React 18 and 19 as peer dependencies and nothing else.

pnpm add @mirayavandiepen/ram

Usage

Wrap the text you want to frame.

built to delight

example.tsx

import { Ram } from "@mirayavandiepen/ram";

export default function Example() {
  return (
    <h1>
      built to <Ram>delight</Ram>
    </h1>
  );
}