Spinner

An animated loading spinner for terminal-style interfaces.

Terminal

Installation

npx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/spinner.json

npx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/spinner.json

pnpm dlx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/spinner.json

bunx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/spinner.json

Usage

app/page.tsx

"use client";

import dynamic from "next/dynamic";

const Terminal = dynamic(() => import("./terminal"), {
  ssr: false,
});

export default function Home() {
  return <Terminal />;
}

app/terminal.tsx

"use client";

import { Box } from "ink";
import { InkXterm } from "ink-web";
import { Spinner } from '@/components/ui/spinner'
import "ink-web/css";
import "xterm/css/xterm.css";

export default function Terminal() {
  return (
    <InkXterm focus>
      <Box flexDirection="column">
        <Spinner text="Loading" />
      </Box>
    </InkXterm>
  )
}

Props

Prop	Type	Default	Description
`text`	`string`	`"Loading"`	Text to display next to the spinner
`color`	`string`	`"gray"`	Color of the spinner and text
`interval`	`number`	`100`	Animation speed in milliseconds

Examples

Basic Spinner

<Spinner />

With Custom Text

<Spinner text="Thinking" />

With Custom Color

<Spinner text="Processing" color="cyan" />

Slower Animation

<Spinner text="Loading" interval={200} />

Spinner

On this page