Concrete
foundation
Primitive

Focus ring

Single 3px sky ring standard applied to interactive atoms.

Focus rings are a foundation token. Consume the shared token through Concrete primitives instead of restyling focus locally.

DOM renderJPEG render
Playground

Props in the URL.

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground.
States

Rendered matrix.

Every state maps to the same render route through the `state` query param.

Props

Public contract.

NameTypeDefaultDescription
token--concrete-ring-focus-Global token applied through :focus-visible.