IonBorder

The signature thinking border: a slow gradient light, a bright comet, or a breathing ring around any container while the AI works.

No model needed

Install

npx ondai add ion-border

Usage

import { IonBorder } from '@/components/ondai/ion-border'

<IonBorder active={isThinking} variant="beam" radius="lg" glow>
  <YourCard />
</IonBorder>

variant: sweep (the slow gradient light), beam (a bright comet with a tail and an outer halo), pulse (the whole ring breathes).

Variants

Prop	Options
`variant`	`sweep`, `beam`, `pulse`
`radius`	`none`, `sm`, `md`, `lg`, `xl`, `pill`

Fallback

Pure UI: no model required.

Eval score

No model-driven fixtures for this component.

Files

npm dependencies: @ondai/tokens, react-native-reanimated, react-native-svg

InstallCopy Anchor Link

UsageCopy Anchor Link

VariantsCopy Anchor Link

FallbackCopy Anchor Link

Eval scoreCopy Anchor Link