How do I install the Loading Overlay component?

Install the free SDK with `bun add @otfdashkit/ui` (or npm/pnpm) and import { LoadingOverlay }. Copy-paste distribution is also supported.

Is the Loading Overlay component free to use?

Yes. Loading Overlay ships in @otfdashkit/ui, part of the free MIT-licensed OTF SDK on npm — use it in personal and commercial projects.

Which platform does this Loading Overlay page cover?

This page documents the web version (@otfdashkit/ui); the OTF SDK's web and native packages share component names and design tokens where a counterpart exists, but props differ per platform.

Loading Overlay

FeedbackMIT

View in Storybook

Full-area blocking spinner overlay for async views — drop-in for any container.

bun add @otfdashkit/ui

Preview

Loading OverlayFeedback

Loading Storybook preview…

Code

@otfdashkit/ui

import { LoadingOverlay } from '@otfdashkit/ui'

export function Example() {
  return (
    <LoadingOverlay loading text="Saving changes...">
      <div className="rounded border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-8 text-center text-sm text-[hsl(var(--muted-foreground))]">
        Content behind the overlay
      </div>
    </LoadingOverlay>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the LoadingOverlay source. Inherited HTML attributes are not listed.

Prop	Type	Default	Description
loadingrequired	boolean
children	ReactNode
className	string
fullPage	boolean
text	string

Preview

Code

Props

Related