Focus Frame

It follows hover and keyboard focus across items and settles back on the current one. Nav bars, options and grids feel connected.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add focus-frame

Example

import { FocusFrame } from "@/components/galactrex/focus-frame";

<FocusFrame look="fill"><a aria-current="page">Home</a><a>Work</a></FocusFrame>

Installs to components/galactrex/focus-frame.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Items: direct children or [data-focus-item].
`look`	`"outline" \| "fill" \| "underline"`	`"outline"`	Frame style.
`restOn`	`string`	—	Selector of the current item to rest on.
`className`	`string`	—	Extra classes for the outer element.