ComponentsUpdated Sep 9, 2026

Loadstone

Highlight’s grid-of-cells loading mark. A config describes the grid and per-cell timing; presets cover the product states, and LoadstoneSequence crossfades between configs.

Import

Source: packages/ui/src/components/loadstone

tsx

1import { Loadstone, LoadstoneSequence, thinkingLoadstoneConfig, LoadstoneConfig } from '@highlight/ui'

Playground

Change the props; the preview and the snippet update together.

Props

Size

Color mode

Paused

Label

tsx

1<Loadstone config={thinkingLoadstoneConfig} size={48} label="Thinking" />

Thinking preset

size scales the whole grid; paused freezes the animation; label is the accessible name.

tsx

1import { Loadstone, thinkingLoadstoneConfig } from '@highlight/ui'2 3export default function LoadstoneBasic() {4  return (5    <div className="flex items-center gap-8">6      <Loadstone config={thinkingLoadstoneConfig} size={24} label="Thinking" />7      <Loadstone config={thinkingLoadstoneConfig} size={32} label="Thinking" />8      <Loadstone config={thinkingLoadstoneConfig} size={48} label="Thinking" />9      <Loadstone config={thinkingLoadstoneConfig} size={48} label="Paused" paused />10    </div>11  )12}

Custom config

rows, columns, and a cells array with order for stagger. lightColor and darkColor per cell.

tsx

1import { Loadstone, type LoadstoneConfig } from '@highlight/ui'2 3const ring: LoadstoneConfig = {4  rows: 3,5  columns: 3,6  animation: 'glow',7  duration: 1200,8  stagger: 120,9  gap: 4,10  radius: 99,11  ledMode: true,12  cells: [13    [0, 0, 0],14    [0, 1, 1],15    [0, 2, 2],16    [1, 2, 3],17    [2, 2, 4],18    [2, 1, 5],19    [2, 0, 6],20    [1, 0, 7],21  ].map(([row, column, order]) => ({22    row,23    column,24    order,25    opacity: 1,26    scale: 1,27    lightColor: '#e8e21c',28    darkColor: '#fff66e',29  })),30}31 32export default function LoadstoneCustom() {33  return <Loadstone config={ring} size={48} label="Recording" />34}

Parts

The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.

Loadstone: The animated mark. config picks the sequence; size sets its box.

Props

Props added on top of the underlying element or Base UI part.

Prop	Type	Default	Description
`config`	LoadstoneConfig	—	Grid, animation, duration, stagger, gap, radius, ledMode, cells.
`size`	number	32	Rendered size in px.
`colorMode`	'light' \| 'dark'	—	Force a theme; defaults to following the page.
`paused`	boolean	false	Freeze.
`label`	string	'Working'	Accessible name.