Orb

FREE

The assistant's lamp: what it is doing, with a word under it.

Every shadcn style · one file

Installation

pnpm dlx shadcn@latest add https://notchset.dev/r/orb.json

Free, no account or key. One command for every shadcn style. With the @notchset registry added, @notchset/<name> works too.

Works with React 18.3 or 19 on Tailwind CSS v4, in any shadcn project. What's tested

Install by hand

1. No extra packages: React is enough.
2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/orb.tsx
3. No stylesheet needed.
4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)

Styles didn't apply?

The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.

Usage

Import it and pass your content. The props that matter most are listed next.

Example

"use client";
import * as React from "react";
import { Orb, type OrbState } from "@/components/ui/notchset/orb";
import { SegmentedControl } from "@/components/ui/notchset/segmented-control";

const STATES: { value: OrbState; label: string }[] = [
  { value: "idle", label: "Ready" },
  { value: "listening", label: "Listening" },
  { value: "thinking", label: "Thinking" },
  { value: "speaking", label: "Speaking" },
  { value: "done", label: "Done" },
];

export default function OrbDemo() {
  const [state, setState] = React.useState<OrbState>("thinking");
  return (
    <div className="flex flex-col items-center gap-6 py-4">
      <Orb state={state} size={128} hint={state === "speaking" ? "Talk to interrupt" : undefined} />
      <SegmentedControl label="State" value={state} onValueChange={setState} options={STATES} size="sm" className="max-w-full overflow-x-auto" />
    </div>
  );
}

This example also uses Segmented control. This command installs them with it, so the example pastes as it is:

pnpm dlx shadcn@latest add https://notchset.dev/r/orb.json https://notchset.dev/r/segmented-control.json

Source

components/ui/notchset/orb.tsx

Props

state"idle"
OrbState
size120
number
its diameter in px
input–
number
the input level while listening, 0 to 1 (your voice: it lights the edge)
output–
number
the output level while speaking, 0 to 1 (its voice: it swells the body); without one the body swells on its own
inputFrom"below"
"below" | "above"
where your voice comes from, so the lit edge faces it
word"under"
"under" | "none"
the word under it; "none" only where the host says the state in its own words beside it

Show all 12 props

words–
Partial<Record<OrbState, string>>
its own words per state
hint–
React.ReactNode
one quieter line under the word
livetrue
boolean
asks for the viewport's one running loop; false keeps it still (an avatar, a thumbnail)
glow1
number
how strongly it glows, 0 to 1.5 (1 is the theme's own)
grain1
number
how much grain the glass has, 0 to 1.5
warmth0.5
number
how warm its light runs, 0 to 1