ComponentsCursor & pointer
Selection Box
A phrase gets a box drawn round it, and a pointer arrives at its corner as if someone just selected it.
"use client";
import { SelectionBox } from "@/components/miyuki-ui/selection-box";
export default function SelectionBoxDemo() {
return (
<h2 className="max-w-2xl text-center font-display text-3xl leading-tight font-semibold tracking-[-0.025em] text-balance sm:text-[44px]">
The forecast that <SelectionBox>skiers actually trust</SelectionBox>
</h2>
);
}Install
npx shadcn@latest add @miyuki-ui/selection-boxThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
SelectionBox
Prop
Type