Skip to Content
Get full access

Orb Select

Orb color select: a compact dropdown for choosing an orb's colorway, with each option shown as a small planet beside its name and the chosen one in the trigger. Lists the Orb Palettes by default; the dropdown sibling of Orb Picker.

pnpm dlx shadcn add @01orbital/orb-select

The example also uses voice-orb. Install it too:

pnpm dlx shadcn add @01orbital/voice-orb

Usage

"use client"

import * as React from "react"

import { OrbSelect } from "@/components/orb-select/orb-select"
import {
  ORB_PALETTES,
  type OrbPaletteName,
} from "@/components/orbs/orb-palettes"
import { VoiceOrb } from "@/components/orbs/voice-orb"

// Every word on the page. Change copy here, not in the markup.
const COPY = { label: "Assistant color" } as const

// The select choosing the assistant's orb: pick a color, the Voice Orb takes it.
export default function OrbSelectDemo() {
  const [value, setValue] = React.useState<string>("planet-14")
  const palette = (
    value in ORB_PALETTES ? value : "planet-14"
  ) as OrbPaletteName
  return (
    <div className="flex w-full max-w-xl flex-col items-center justify-center gap-8 p-6 sm:flex-row sm:gap-10">
      <VoiceOrb palette={palette} size={140} />
      <div className="flex flex-col gap-3">
        <p className="font-display text-xl">{COPY.label}</p>
        <OrbSelect
          aria-label={COPY.label}
          value={value}
          onValueChange={setValue}
        />
      </div>
    </div>
  )
}

API reference

A select for an orb's colors: each option shows its colorway as a small planet beside its name, and the trigger shows the chosen one. It is the kit's Select, so it opens on click or from the keyboard and the arrow keys move through the options. Lists the Orb Palettes colorways by default. className and aria-label land on the trigger.

Prop

Type

Dependencies

npm: cn. The CLI installs them for you.

Registry pieces it installs with it: