Spinner

A loading spinner component for indicating async operations. Used in notebooks to show kernel execution state, cell running status, and other loading states.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/spinner.json

Copy the component from this repository's components/ui/spinner.tsx.

Usage

import { Spinner } from "@/registry/primitives/spinner"

export function Example() {
  return <Spinner />
}

Sizes

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

With Text

<div className="flex items-center gap-2">
  <Spinner size="sm" />
  <span className="text-sm text-muted-foreground">Loading...</span>
</div>

Notebook Examples

Cell Execution

Running cell...

<div className="flex items-center gap-2">
  <Spinner size="sm" />
  <span className="text-muted-foreground">Running cell...</span>
</div>

Kernel Starting

Starting kernel...

<div className="flex items-center gap-2">
  <Spinner size="md" />
  <span className="text-muted-foreground">Starting kernel...</span>
</div>

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	Spinner size
`className`	`string`	—	Additional CSS classes
`...props`	`LucideProps`	—	All Lucide icon props

Spinner

On this page