--- title: "Text Select Cursor" description: "An arrow turns into an I-beam over a document, drags a selection across a phrase character by character, raises a format toolbar, turns back into an arrow and clicks Bold." mode: "frame" --- import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx"; import { InstallCommand } from "/snippets/install-command.jsx"; ```html cursor-text-select.html Text Select Cursor ``` That writes one file: `compositions/components/cursor-text-select.html`. ## Paste it into your composition Open `compositions/components/cursor-text-select.html` and copy what is inside into your own composition. A component has no size or duration of its own. It takes both from the composition you paste it into. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | --- | --- | --- | --- | | `title` | `Spring release notes` | string | | | `text` | `Our spring release ships on Thursday. Teams can now share a live review link, collect time-stamped comments, and approve the final cut without leaving the editor. Early customers cut their review rounds in half.` | string | | | `phrase` | `approve the final cut` | string | | | `accent` | `#0a84ff` | color | | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap
``` {/* hf:generated-footer */} Tagged `cursor` `motion-primitive` `text` `selection` `editor` `toolbar`. ## Related topics - [Browse the complete Catalog](/catalog) - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks) - [Put blocks together into one video](/concepts/compositions)