### Install a component with bunx or npx

Source: https://ui.spectrumhq.in/docs/mcp

Commands that run behind the scenes when the MCP server installs a component. The first tries Bun, the second falls back to npm/pnpm/yarn. You can also run them manually; they appear on every component's docs page in the Installation section.

```bash
bunx --bun shadcn@latest add @spectrumui/<component-name>
```

```bash
npx shadcn@latest add @spectrumui/<component-name>
```

--------------------------------

### ReactionBar

Source: https://ui.spectrumhq.in/docs/reaction-bar

Documentation for the ReactionBar component, including its props and usage example.

```APIDOC
## ReactionBar

### Description
Renders a row of reaction chips, each a `button` with `aria-pressed` reflecting whether you have reacted. Reactions use the exported `Reaction` type: `{ emoji: string; count: number; reacted?: boolean }`. Pass `reactions` to control the list from outside, or `defaultReactions` to let it manage its own state. Toggling a chip adjusts its count by one, and a chip whose count reaches zero is removed.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `reactions` | `Reaction[]` | - | Controlled reactions. Leave undefined for uncontrolled usage |
| `defaultReactions` | `Reaction[]` | `[]` | Initial reactions when uncontrolled |
| `onReactionsChange` | `(reactions: Reaction[]) => void` | - | Fires with the next reactions array on every change |
| `availableEmojis` | `string[]` | `["👍", "❤️", "😂", "🎉", "😮", "🚀"]` | Emojis offered in the add popover |
| `addable` | `boolean` | `true` | Show the plus button that opens the emoji popover |
| `size` | `"sm" | "md"` | `"md"` | Visual size of the chips |
| `className` | `string` | - | Additional classes merged with the default container styles |

### Usage Example

```jsx
import { ReactionBar } from "@/components/spectrumui/reaction-bar"

<ReactionBar
  defaultReactions={[
    { emoji: "👍", count: 3, reacted: true },
    { emoji: "🎉", count: 1 },
  ]}
  onReactionsChange={(reactions) => console.log(reactions)}
/>
```
```

--------------------------------

### Initialize shadcn/ui with pnpm dlx shadcn@latest init

Source: https://ui.spectrumhq.in/docs/installation

Initializes shadcn/ui in your project. Installs required packages and prepares Tailwind CSS. Add the -d flag to skip questions and use default settings.

```shell
pnpm dlx shadcn@latest init
```

--------------------------------

### Usage example

Source: https://ui.spectrumhq.in/docs/expandable-action-bar

Renders an ExpandableActionBar with two items (Edit and Share) and an onAction handler that calls run(item.id).

```tsx
<ExpandableActionBar
  items={[
    { id: "edit", label: "Edit", icon: <Pencil className="size-4" />, shortcut: "E" },
    { id: "share", label: "Share", icon: <Share2 className="size-4" /> },
  ]}
  onAction={(item) => run(item.id)}
/>
```

--------------------------------

### StarRating

Source: https://ui.spectrumhq.in/docs/star-rating

Documentation for the StarRating component, including its props and usage example.

```APIDOC
## StarRating

### Description
Renders a `radiogroup` of star buttons with full arrow-key, Home/End and Space/Enter keyboard support. Pass `value` to control it from outside, or `defaultValue` to let it manage its own state. In `readOnly` mode it renders a static, fraction-capable display.

### Props
- **value** (`number`) - Optional - Controlled rating value. Leave undefined for uncontrolled usage
- **defaultValue** (`number`, default: `0`) - Optional - Initial rating when uncontrolled
- **onValueChange** (`(value: number) => void`) - Optional - Fires with the next rating on every commit
- **max** (`number`, default: `5`) - Optional - Number of stars rendered
- **size** (`"sm" | "md" | "lg"`, default: `"md"`) - Optional - Visual size of the stars (16 / 22 / 28 px icons)
- **allowClear** (`boolean`, default: `true`) - Optional - Clicking the committed star again clears the rating to 0
- **readOnly** (`boolean`, default: `false`) - Optional - Display-only mode without hover or click interactivity; supports fractional values like 4.3
- **showValue** (`boolean`, default: `false`) - Optional - Show a rolling "4/5" value label that tracks the current or previewed rating
- **label** (`string`, default: `"Rating"`) - Optional - Accessible name of the rating group
- **className** (`string`) - Optional - Additional classes merged with the default container styles

### Usage Example
```jsx
import { StarRating } from "@/components/spectrumui/star-rating"

<StarRating showValue onValueChange={(value) => console.log(value)} />
```
```

--------------------------------

### Example usage of BeamSearch

Source: https://ui.spectrumhq.in/docs/beam-search

Example JSX usage of the BeamSearch component with a placeholder, onChange, and onSubmit handlers. This demonstrates how to integrate the component and manage its state.

```jsx
<BeamSearch
  placeholder="Search components…"
  onChange={setQuery}
  onSubmit={runSearch}
/>

```

--------------------------------

### AvatarStack

Source: https://ui.spectrumhq.in/docs/avatar-stack

Documentation for the AvatarStack component, including its props and usage example.

```APIDOC
## AvatarStack

### Description
Renders a `role="group"` of avatar buttons with roving arrow-key focus; each item is an `AvatarItem` of shape `{ name: string; src?: string }`. When `src` is omitted, initials are derived from the first two words of `name`. The name also becomes the button's `aria-label` and the tooltip text, and `Escape` collapses an expanded stack.

### Props
- **items** (`AvatarItem[]`) - Required - People to render; the first max are visible, the rest sit behind the +N pill
- **max** (`number`) - Optional, default `4` - Number of avatars shown before overflowing into the +N pill
- **size** (`"sm" | "md" | "lg"`) - Optional, default `"md"` - Avatar diameter: 28, 36 or 44px
- **expandable** (`boolean`) - Optional, default `true` - Whether clicking the +N pill expands the hidden avatars with a stagger
- **onAvatarClick** (`(item: AvatarItem, index: number) => void`) - Optional - Fires when an avatar is clicked or activated with Enter/Space
- **className** (`string`) - Optional - Additional classes merged onto the group container

### Usage Example
```jsx
<AvatarStack
  items={[
    { name: "Arjun Mehta", src: "/avatars/people/01.jpg" },
    { name: "Priya Nair", src: "/avatars/people/05.jpg" },
    { name: "Noah Kim", src: "/avatars/people/06.jpg" },
  ]}
  onAvatarClick={(item) => console.log(item.name)}
/>
```
```

--------------------------------

### BeamCard usage example

Source: https://ui.spectrumhq.in/docs/beam-card

Example usage of the BeamCard component with the pulse-outside size, ocean color variant, and custom content. The beam hugs the card's border radius.

```tsx
<BeamCard
  size="pulse-outside"
  colorVariant="ocean"
  eyebrow="Pro"
  title="Edge inference"
  description="Models run in the region closest to the user."
/>
```

--------------------------------

### TransferFundsCard

Source: https://ui.spectrumhq.in/docs/transfer-funds-card

Documentation for the TransferFundsCard React component, including its props and usage example.

```APIDOC
## TransferFundsCard

### Description
A presentational form card for transferring funds between accounts. It includes an amount field, source and destination account pickers, a summary table, and a confirm button. All labels and values are configurable via props.

### Props
- **amount** (`string`) - Default: `"1,200.00"` - Formatted amount shown in the amount field
- **currencySymbol** (`string`) - Default: `"$"` - Symbol shown before the amount
- **fromAccount** (`string`) - Required - Text of the source account picker
- **toAccount** (`string`) - Required - Text of the destination account picker
- **summary** (`{ label: string; value: string; emphasized?: boolean }[]`) - Required - Rows of the summary table; emphasized rows render bold
- **title** (`string`) - Default: `"Transfer Funds"` - Card heading
- **description** (`string`) - Default: `"Move money between your connected accounts."` - Supporting copy under the heading
- **amountLabel** (`string`) - Default: `"Amount to Transfer"` - Label for the amount field
- **fromLabel** (`string`) - Default: `"From Account"` - Label for the source picker
- **toLabel** (`string`) - Default: `"To Account"` - Label for the destination picker
- **buttonLabel** (`string`) - Default: `"Confirm Transfer"` - Confirm button text
- **onConfirm** (`() => void`) - Required - Fires when the confirm button is pressed
- **onClose** (`() => void`) - Optional - Fires when the close button in the header is pressed
- **className** (`string`) - Optional - Additional classes merged with the root styles

### Usage Example
```jsx
import { TransferFundsCard } from "@/components/spectrumui/transfer-funds-card"

<TransferFundsCard
  amount="1,200.00"
  fromAccount="Main Checking (··8402) — ,450.00"
  toAccount="High Yield Savings (··1192) — ,100.00"
  onConfirm={() => console.log("confirm")}
/>
```
```

--------------------------------

### SwipeToDelete usage example

Source: https://ui.spectrumhq.in/docs/swipe-to-delete

Wrap a row component with SwipeToDelete, providing a label and an onDelete callback that removes the item from state.

```tsx
<SwipeToDelete label="email from Ava" onDelete={() => removeEmail(id)}>
  <EmailRow />
</SwipeToDelete>
```

--------------------------------

### Render AnimatedSwitch with defaultChecked and onCheckedChange

Source: https://ui.spectrumhq.in/docs/animated-switch

Renders the AnimatedSwitch component with defaultChecked and an onCheckedChange handler that logs the checked state. This is the basic usage example.

```tsx
<AnimatedSwitch defaultChecked onCheckedChange={(checked) => console.log(checked)} />
```

--------------------------------

### Render NumberTicker with value, prefix, locale, and blur

Source: https://ui.spectrumhq.in/docs/number-ticker

Render the NumberTicker with a value of 48250, a dollar sign prefix, locale group separators, and blur during rolls. This example is shown in the Usage section.

```tsx
<NumberTicker value={48250} prefix="$" locale blur />
```

--------------------------------

### Use TextStates in a button

Source: https://ui.spectrumhq.in/docs/text-states

Example usage of the TextStates component inside a button. The text prop changes based on the saving and saved state variables, triggering the exit and enter swap animation.

```tsx
<button onClick={save}>
  <TextStates text={saving ? "Saving…" : saved ? "Saved" : "Save"} />
</button>
```

--------------------------------

### Import and render CommandSearch with queries and onSelect

Source: https://ui.spectrumhq.in/docs/command-search

Import the CommandSearch component from the local spectrumui path, then render it with a list of queries and an onSelect handler that logs the selected item's label. The component types each query and live-filters grouped results by default.

```tsx
import { CommandSearch } from "@/components/spectrumui/command-search"
```

```tsx
<CommandSearch
  queries={["chart", "button", "pricing"]}
  onSelect={(item) => console.log(item.label)}
/>
```

--------------------------------

### Import KbdKey and KbdCombo

Source: https://ui.spectrumhq.in/docs/kbd-key

Import the KbdKey and KbdCombo components from the local spectrumui components directory.

```tsx
import { KbdKey, KbdCombo } from "@/components/spectrumui/kbd-key"
```

--------------------------------

### Import QuantityStepper

Source: https://ui.spectrumhq.in/docs/quantity-stepper

Import the QuantityStepper component from the local components directory.

```javascript
import { QuantityStepper } from "@/components/spectrumui/quantity-stepper"
```

--------------------------------

### Render KbdKey and KbdCombo

Source: https://ui.spectrumhq.in/docs/kbd-key

Render a single keycap with the label K, and a combo that listens for meta+k and fires the onTrigger callback when all keys are held simultaneously.

```tsx
<KbdKey>K</KbdKey>
<KbdCombo keys="meta+k" onTrigger={() => console.log("open palette")} />
```

--------------------------------

### Create a new Next.js project

Source: https://ui.spectrumhq.in/docs/installation

Creates a new Next.js project. Run this in your terminal to scaffold a new project, or skip if you already have one.

```shell
pnpm create next-app@latest
```

--------------------------------

### Import ReactionBar component

Source: https://ui.spectrumhq.in/docs/reaction-bar

Import the ReactionBar component from the directory '@/components/spectrumui/reaction-bar'.

```JavaScript
import { ReactionBar } from "@/components/spectrumui/reaction-bar"
```

--------------------------------

### KbdCombo

Source: https://ui.spectrumhq.in/docs/kbd-key

Renders one KbdKey per key joined by + separators. Each cap listens to its own key; when every key is down at the same time the whole combo pulses once and onTrigger fires.

```APIDOC
## KbdCombo

### Description
Renders one `KbdKey` per key joined by `+` separators. Each cap listens to its own key; when every key is down at the same time the whole combo pulses once and `onTrigger` fires.

### Props
- **keys** (string) - Required - "+"-separated keys, e.g. "meta+k" or "shift+?". Names map to glyphs: meta → ⌘, shift → ⇧, alt → ⌥, ctrl → ⌃, enter → ↵, space → ␣, escape → esc, arrows → ↑ ↓ ← →
- **listen** (boolean) - Default: true - Depress each cap while its real key is held
- **onTrigger** (() => void) - Optional - Fires once each time every key in the combo is held down simultaneously
- **size** ("sm" | "md") - Default: "md" - Visual size of the caps
- **className** (string) - Optional - Additional classes merged with the combo wrapper styles

### Usage Example
```jsx
<KbdCombo keys="meta+k" onTrigger={() => console.log("open palette")} />
```
```

--------------------------------

### Import and render HoldToConfirmButton

Source: https://ui.spectrumhq.in/docs/hold-to-confirm

Import the HoldToConfirmButton component from the local spectrumui path, then render it with an onConfirm callback that logs to the console. The component fills a progress ring when held and fires onConfirm once on completion.

```jsx
import { HoldToConfirmButton } from "@/components/spectrumui/hold-to-confirm"
```

```jsx
<HoldToConfirmButton onConfirm={() => console.log("confirmed")} />
```

--------------------------------

### Import and render FollowButton with onFollowingChange

Source: https://ui.spectrumhq.in/docs/follow-button

Import the FollowButton component from the spectrumui path. Then render it with an onFollowingChange callback that logs the new following state on every toggle.

```javascript
import { FollowButton } from "@/components/spectrumui/follow-button"
```

```jsx
<FollowButton onFollowingChange={(following) => console.log(following)} />
```

--------------------------------

### FollowButton

Source: https://ui.spectrumhq.in/docs/follow-button

Documentation for the FollowButton component, including its props and usage.

```APIDOC
## FollowButton

### Description
Renders a single `button` element with `aria-pressed` reflecting the following state. Pass `following` to control it from outside, or `defaultFollowing` to let it manage its own state.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `following` | `boolean` | - | Controlled following state. Leave undefined for uncontrolled usage |
| `defaultFollowing` | `boolean` | `false` | Initial following state when uncontrolled |
| `onFollowingChange` | `(following: boolean) => void` | - | Fires with the next following state on every toggle |
| `followLabel` | `string` | `"Follow"` | Label of the idle call-to-action pill |
| `followingLabel` | `string` | `"Following"` | Label shown while followed |
| `unfollowLabel` | `string` | `"Unfollow"` | Label revealed on hover or focus while followed |
| `size` | `"sm" | "md" | "lg"` | `"md"` | Visual size of the button |
| `disabled` | `boolean` | `false` | Disables pointer and keyboard interaction |
| `className` | `string` | - | Additional classes merged with the default button styles |

### Usage Example

```jsx
import { FollowButton } from "@/components/spectrumui/follow-button"

<FollowButton onFollowingChange={(following) => console.log(following)} />
```
```

--------------------------------

### Basic Usage of QuantityStepper

Source: https://ui.spectrumhq.in/docs/quantity-stepper

Renders a QuantityStepper with min and max values and logs the value on change.

```jsx
<QuantityStepper min={1} max={10} onValueChange={(value) => console.log(value)} />
```

--------------------------------

### Import AnimatedSwitch component

Source: https://ui.spectrumhq.in/docs/animated-switch

Import the AnimatedSwitch component from the local components directory. This is the first step to using the component.

```tsx
import { AnimatedSwitch } from "@/components/spectrumui/animated-switch"
```

--------------------------------

### Import and use TiltCard with TiltCardItem

Source: https://ui.spectrumhq.in/docs/tilt-card

Import the TiltCard and TiltCardItem components from the spectrumui tilt-card module. Use TiltCard as the perspective container and TiltCardItem for depth layers that lift toward the viewer while hovered.

```tsx
import { TiltCard, TiltCardItem } from "@/components/spectrumui/tilt-card"
```

```tsx
<TiltCard className="max-w-sm p-6">
  <TiltCardItem depth={60}>Floats above the card</TiltCardItem>
  <TiltCardItem depth={30}>Floats a little less</TiltCardItem>
</TiltCard>
```

--------------------------------

### Import ShareButton

Source: https://ui.spectrumhq.in/docs/share-button

Import the ShareButton component from the spectrumui library.

```javascript
import { ShareButton } from "@/components/spectrumui/share-button"
```

--------------------------------

### Import NavListCard and icons

Source: https://ui.spectrumhq.in/docs/nav-list-card

Import the NavListCard component and the icons from lucide-react used in the items.

```jsx
import { NavListCard } from "@/components/spectrumui/nav-list-card"
import { BookOpen, CircleHelp } from "lucide-react"
```

--------------------------------

### Render FAQTabsCard with tabs and footer click handler

Source: https://ui.spectrumhq.in/docs/faq-tabs-card

Render the FAQTabsCard with two tabs (General and Billing), each containing a single FAQ item. The onFooterClick prop logs "contact support" when the footer button is pressed.

```tsx
<FAQTabsCard
  tabs={[
    {
      label: "General",
      faqs: [{ question: "Is my data encrypted?", answer: "Yes, at rest and in transit." }],
    },
    {
      label: "Billing",
      faqs: [{ question: "Can I cancel anytime?", answer: "Yes, from the billing page." }],
    },
  ]}
  onFooterClick={() => console.log("contact support")}
/>
```

--------------------------------

### Configure the spectrum-ui MCP server

Source: https://ui.spectrumhq.in/docs/mcp

Shared MCP server definition used by all clients. Add it to your client's MCP config file (e.g., .mcp.json, claude_desktop_config.json, .cursor/mcp.json, ~/.codeium/windsurf/mcp_config.json, or .vscode/mcp.json).

```json
{
  "mcpServers": {
    "spectrum-ui": {
      "command": "npx",
      "args": ["-y", "@spectrumui/mcp"]
    }
  }
}
```

--------------------------------

### KbdKey

Source: https://ui.spectrumhq.in/docs/kbd-key

Renders a single kbd element styled as a keycap. With listen enabled it depresses while the matching real key is held; when onPress is provided the cap is wrapped in a focusable button.

```APIDOC
## KbdKey

### Description
Renders a single `kbd` element styled as a keycap. With `listen` enabled it depresses while the matching real key is held; when `onPress` is provided the cap is wrapped in a focusable `button`.

### Props
- **children** (React.ReactNode) - Required - Cap legend, e.g. "K", "⌘" or "esc"
- **keyName** (string) - Optional - Key matched against KeyboardEvent.key, case-insensitively. Friendly names work: "meta", "ctrl", "shift", "alt", "enter", "escape", "space", "up"… Derived from children when it is a plain string; symbol legends like "⌘" need an explicit keyName
- **listen** (boolean) - Default: true - Depress the cap while the real key is held, via a window listener
- **onPress** (() => void) - Optional - Fires once per press — on a matching keydown or a pointer tap. Also wraps the cap in a button for accessibility
- **size** ("sm" | "md") - Default: "md" - Visual size of the cap
- **className** (string) - Optional - Additional classes merged with the default cap styles

### Usage Example
```jsx
<KbdKey>K</KbdKey>
```
```

--------------------------------

### Import and render AIChatCard with prompts and onSend

Source: https://ui.spectrumhq.in/docs/ai-chat-card

Import the AIChatCard component and render it with a greeting, an array of prompts for the typing loop, and an onSend handler that logs the message. The component types each prompt on a loop until the user clicks into the composer, which stops the typing and hands the text over.

```tsx
import { AIChatCard } from "@/components/spectrumui/ai-chat-card"
```

```tsx
<AIChatCard
  greeting="Morning, Arihant!"
  prompts={["Make my hero section feel more premium", "Add a pricing table"]}
  onSend={(message) => console.log(message)}
/>
```

--------------------------------

### Import and render StarRating with showValue and onValueChange

Source: https://ui.spectrumhq.in/docs/star-rating

Import the StarRating component from the spectrumui package. Then render it with the showValue prop to display a rolling value label and onValueChange to log the committed rating.

```tsx
import { StarRating } from "@/components/spectrumui/star-rating"
```

```tsx
<StarRating showValue onValueChange={(value) => console.log(value)} />
```

--------------------------------

### Import and render RecentActivity component

Source: https://ui.spectrumhq.in/docs/recent-activity

Import the RecentActivity component and render it with a title and an array of activity items. Each item requires a title, duration, description, and timeAgo property. The component displays a list of recent agent runs with duration and recency chips.

```javascript
import { RecentActivity } from "@/components/spectrumui/recent-activity"
```

```jsx
<RecentActivity
  title="Recent Activity"
  items={[
    { title: "Peer Review", duration: "15s", description: "Reviewed and approved 3 pull requests", timeAgo: "30H" },
    { title: "SEO Audit", duration: "5m", description: "Checked 50 web pages for issues", timeAgo: "12H" },
  ]}
/>
```

--------------------------------

### Import BeamCard component

Source: https://ui.spectrumhq.in/docs/beam-card

Import the BeamCard component from the local components directory. This is the first step to using the component in your project.

```typescript
import { BeamCard } from "@/components/spectrumui/beam-card"
```

--------------------------------

### Implement ShareButton

Source: https://ui.spectrumhq.in/docs/share-button

Basic implementation of the ShareButton with a copy value and a custom action.

```jsx
<ShareButton
  copyValue="https://ui.spectrumhq.in"
  actions={[
    { icon: <Twitter size={15} />, label: "Share on X", onSelect: () => shareOnX() },
  ]}
/>
```

--------------------------------

### Import TaskCheckbox

Source: https://ui.spectrumhq.in/docs/task-checkbox

Import the TaskCheckbox component from the spectrumui components directory.

```tsx
import { TaskCheckbox } from "@/components/spectrumui/task-checkbox"
```

--------------------------------

### Import FAQTabsCard component

Source: https://ui.spectrumhq.in/docs/faq-tabs-card

Import the FAQTabsCard component from the local spectrumui components directory. This import is required before using the component in a React or Next.js project.

```tsx
import { FAQTabsCard } from "@/components/spectrumui/faq-tabs-card"
```

--------------------------------

### Import SkeletonReveal

Source: https://ui.spectrumhq.in/docs/skeleton-reveal

Import the SkeletonReveal component from the local components directory.

```TypeScript
import { SkeletonReveal } from "@/components/spectrumui/skeleton-reveal"
```

--------------------------------

### Usage of ReactionBar component

Source: https://ui.spectrumhq.in/docs/reaction-bar

Render a ReactionBar with initial reactions (with one marked as reacted) and a callback to log reactions when they change.

```JSX
const App = () => (
  <ReactionBar
    defaultReactions={[
      { emoji: "👍", count: 3, reacted: true },
      { emoji: "🎉", count: 1 },
    ]}
    onReactionsChange={(reactions) => console.log(reactions)}
  />
)
```

--------------------------------

### Import and render LikeButton with count and onLikedChange

Source: https://ui.spectrumhq.in/docs/like-button

Import the LikeButton component from the local spectrumui path, then render it with a count and an onLikedChange handler that logs the new liked state. The component is intended for React and TypeScript projects using Tailwind CSS and Motion.

```tsx
import { LikeButton } from "@/components/spectrumui/like-button"
```

```tsx
<LikeButton count={128} onLikedChange={(liked) => console.log(liked)} />
```

--------------------------------

### Import MorphButton component

Source: https://ui.spectrumhq.in/docs/morph-button

Import the MorphButton component from the spectrumui components directory.

```javascript
import { MorphButton } from "@/components/spectrumui/morph-button"
```

--------------------------------

### Import AccountAccessCard

Source: https://ui.spectrumhq.in/docs/account-access-card

Import the AccountAccessCard component from the local components directory.

```tsx
import { AccountAccessCard } from "@/components/spectrumui/account-access-card"
```

--------------------------------

### DataTable with sorting, search, selection, and bulk actions

Source: https://ui.spectrumhq.in/docs/data-table

Import the DataTable component and its column type, then define an Invoice interface and a columns array with sortable fields. Render the table with search, selection, pagination, default sorting, and a bulk action that exports selected rows.

```tsx
import { DataTable, type DataTableColumn } from "@/components/spectrumui/data-table"
```

```tsx
interface Invoice {
  id: string
  customer: string
  status: "paid" | "pending" | "failed"
  amount: number
}

const columns: DataTableColumn<Invoice>[] = [
  { id: "customer", header: "Customer", sortable: true, value: (row) => row.customer },
  { id: "status", header: "Status", sortable: true, value: (row) => row.status },
  { id: "amount", header: "Amount", sortable: true, numeric: true, value: (row) => row.amount },
]

<DataTable
  data={invoices}
  columns={columns}
  rowId={(row) => row.id}
  caption="Invoices from the last 30 days."
  searchable
  selectable
  pageSize={10}
  defaultSort={{ columnId: "amount", direction: "desc" }}
  bulkActions={({ ids, clear }) => (
    <button onClick={() => exportInvoices(ids).then(clear)}>Export</button>
  )}
/>
```

--------------------------------

### Use useAnimatedToastStack and AnimatedToastStack

Source: https://ui.spectrumhq.in/docs/toast-stack

Use the hook to manage toasts, show a loading toast, update it to success, and render the stack with a bottom-right position.

```tsx
const { toasts, showToast, updateToast, dismissToast } = useAnimatedToastStack()

const id = showToast({ status: "loading", title: "Deploying…", duration: 0 })
updateToast(id, { status: "success", title: "Deployed" })

<AnimatedToastStack toasts={toasts} onDismiss={dismissToast} position="bottom-right" />
```

--------------------------------

### Import and render NotificationBell

Source: https://ui.spectrumhq.in/docs/notification-bell

Import the NotificationBell component from the spectrumui path, then render it with a count and an onClick handler. The count prop triggers the swing and badge animations when it increases.

```jsx
import { NotificationBell } from "@/components/spectrumui/notification-bell"
```

```jsx
<NotificationBell count={3} onClick={() => console.log("open inbox")} />
```

--------------------------------

### Import and render TransferFundsCard

Source: https://ui.spectrumhq.in/docs/transfer-funds-card

Import the TransferFundsCard component and render it with required props. The fromAccount and toAccount strings appear truncated in the source, missing the dollar amounts.

```tsx
import { TransferFundsCard } from "@/components/spectrumui/transfer-funds-card"
```

```tsx
<TransferFundsCard
  amount="1,200.00"
  fromAccount="Main Checking (··8402) — ,450.00"
  toAccount="High Yield Savings (··1192) — ,100.00"
  onConfirm={() => console.log("confirm")}
/>
```

--------------------------------

### Add Spectrum UI MCP server to Claude Code

Source: https://ui.spectrumhq.in/docs/mcp

Run this command in your project to add the Spectrum UI MCP server to Claude Code. After running it, restart Claude Code before using the MCP prompts.

```bash
claude mcp add spectrum-ui -- npx -y @spectrumui/mcp
```

--------------------------------

### Import AnimatedToastStack and useAnimatedToastStack

Source: https://ui.spectrumhq.in/docs/toast-stack

Import the AnimatedToastStack component and its hook from the local motion components directory.

```typescript
import { AnimatedToastStack, useAnimatedToastStack } from "@/components/motion/animated-toast-stack"
```

--------------------------------

### Import PasswordStrengthInput

Source: https://ui.spectrumhq.in/docs/password-strength

Import the PasswordStrengthInput component from the local components path.

```typescript
import { PasswordStrengthInput } from "@/components/spectrumui/password-strength"
```

--------------------------------

### Import UndoPill component

Source: https://ui.spectrumhq.in/docs/undo-pill

Import the UndoPill component from the spectrumui components directory.

```tsx
import { UndoPill } from "@/components/spectrumui/undo-pill"
```

--------------------------------

### Import ExpandableActionBar

Source: https://ui.spectrumhq.in/docs/expandable-action-bar

Import the ExpandableActionBar component from the specified path.

```typescript
import { ExpandableActionBar } from "@/components/motion/expandable-action-bar"
```

--------------------------------

### QuantityStepper

Source: https://ui.spectrumhq.in/docs/quantity-stepper

Renders a group containing a keyboard operable spinbutton value between two step buttons. Pass value to control it from outside, or defaultValue to let it manage its own state. The value is always clamped to min and max.

```APIDOC
## QuantityStepper

### Description
Renders a `group` containing a keyboard operable `spinbutton` value between two step buttons. Pass `value` to control it from outside, or `defaultValue` to let it manage its own state. The value is always clamped to `min` and `max`.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `number` | - | Controlled value. Leave undefined for uncontrolled usage |
| `defaultValue` | `number` | `1` | Initial value when uncontrolled |
| `onValueChange` | `(value: number) => void` | - | Fires with the next clamped value on every change |
| `min` | `number` | `0` | Lowest allowed value |
| `max` | `number` | `99` | Highest allowed value |
| `step` | `number` | `1` | Amount added or removed per press. PageUp and PageDown jump by ten steps |
| `size` | `"sm" | "md" | "lg"` | `"md"` | Visual size of the stepper |
| `disabled` | `boolean` | `false` | Disables pointer and keyboard interaction |
| `className` | `string` | - | Additional classes merged with the default pill styles |

### Usage Example
```jsx
import { QuantityStepper } from "@/components/spectrumui/quantity-stepper"

<QuantityStepper min={1} max={10} onValueChange={(value) => console.log(value)} />
```
```

--------------------------------

### Import SwipeToDelete

Source: https://ui.spectrumhq.in/docs/swipe-to-delete

Import the SwipeToDelete component from the spectrumui components directory.

```tsx
import { SwipeToDelete } from "@/components/spectrumui/swipe-to-delete"
```

--------------------------------

### Import and render AvatarStack with items and click handler

Source: https://ui.spectrumhq.in/docs/avatar-stack

Import the AvatarStack component, then render it with an items array of people and an onAvatarClick handler. The component displays a group of avatar buttons with roving arrow-key focus; when src is omitted, initials are derived from the first two words of name. The name also becomes the button's aria-label and tooltip text, and Escape collapses an expanded stack.

```tsx
import { AvatarStack } from "@/components/spectrumui/avatar-stack"
```

```tsx
<AvatarStack
  items={[
    { name: "Arjun Mehta", src: "/avatars/people/01.jpg" },
    { name: "Priya Nair", src: "/avatars/people/05.jpg" },
    { name: "Noah Kim", src: "/avatars/people/06.jpg" },
  ]}
  onAvatarClick={(item) => console.log(item.name)}
/>
```

--------------------------------

### PasswordStrengthInput

Source: https://ui.spectrumhq.in/docs/password-strength

Documentation for the PasswordStrengthInput component, including its props, usage, and exported constants.

```APIDOC
## PasswordStrengthInput

### Description
Renders a password input with a visibility toggle, a strength meter announced via a polite live region, and a requirements checklist. Pass `value` to control it from outside, or `defaultValue` to let it manage its own state. Strength is scored against `rules`, an array of `PasswordRule` objects of the shape `{ label: string; test: (value: string) => boolean }`.

### Props
- **`value`** (string) - Optional - Controlled value. Leave undefined for uncontrolled usage.
- **`defaultValue`** (string) - Default: `""` - Initial value when uncontrolled.
- **`onValueChange`** ((value: string) => void) - Optional - Fires with the next value on every keystroke.
- **`rules`** (PasswordRule[]) - Default: `DEFAULT_RULES` - Rules scored by the meter and listed in the checklist.
- **`showChecklist`** (boolean) - Default: `true` - Render the requirements checklist.
- **`showMeter`** (boolean) - Default: `true` - Render the strength meter and label.
- **`placeholder`** (string) - Default: `"Enter password"` - Placeholder of the input.
- **`id`** (string) - Optional - Id of the input element.
- **`name`** (string) - Optional - Name of the input element.
- **`autoComplete`** (string) - Default: `"new-password"` - Autocomplete hint of the input.
- **`disabled`** (boolean) - Default: `false` - Disables the input and the visibility toggle.
- **`onFocus`** (React.FocusEventHandler<HTMLInputElement>) - Optional - Forwarded to the input element.
- **`onBlur`** (React.FocusEventHandler<HTMLInputElement>) - Optional - Forwarded to the input element.
- **`className`** (string) - Optional - Additional classes merged onto the wrapper element.

### Usage Example
```jsx
import { PasswordStrengthInput } from "@/components/spectrumui/password-strength"

<PasswordStrengthInput onValueChange={(value) => console.log(value)} />
```

### Exported Constants
- **`DEFAULT_RULES`** - An array of `PasswordRule` objects that check for at least 8 characters, one uppercase letter, one number, and one symbol.
```

--------------------------------

### Usage of AccountAccessCard

Source: https://ui.spectrumhq.in/docs/account-access-card

Renders the AccountAccessCard with a single credential and an onSubmit callback that logs 'update security'.

```tsx
<AccountAccessCard
  credentials={[{ email: "alfa@spectrum.com", passwordLength: 14 }]}
  onSubmit={() => console.log("update security")}
/>
```

--------------------------------

### Import TreeNav and Link

Source: https://ui.spectrumhq.in/docs/tree-nav

Import the TreeNav component and Next.js Link for use in a Next.js project.

```tsx
import Link from "next/link"
import { TreeNav } from "@/components/spectrumui/tree-nav"
```

--------------------------------

### Render TaskCheckbox with label and onCheckedChange

Source: https://ui.spectrumhq.in/docs/task-checkbox

Render a TaskCheckbox with a label and an onCheckedChange handler that logs the checked state.

```tsx
<TaskCheckbox label="Ship the changelog" onCheckedChange={(checked) => console.log(checked)} />
```

--------------------------------

### Use MorphButton with onAction

Source: https://ui.spectrumhq.in/docs/morph-button

Render a MorphButton that runs the full idle → loading → success cycle when clicked, calling the saveChanges function.

```jsx
<MorphButton onAction={() => saveChanges()}>Save changes</MorphButton>
```

--------------------------------

### Import BeamSearch component

Source: https://ui.spectrumhq.in/docs/beam-search

Import statement for the BeamSearch component from the Spectrum UI component library. Used to access the beam search bar in your project.

```javascript
import { BeamSearch } from "@/components/spectrumui/beam-search"

```

--------------------------------

### Usage of SkeletonReveal

Source: https://ui.spectrumhq.in/docs/skeleton-reveal

Wrap real content with SkeletonReveal, providing a skeleton placeholder and a loading boolean. When loading is true, the skeleton pulses; when false, the content cross-fades and un-blurs.

```TSX
<SkeletonReveal loading={isLoading} skeleton={<RowSkeleton />}>
  <Row user={user} />
</SkeletonReveal>
```

--------------------------------

### Import Accordion component

Source: https://ui.spectrumhq.in/docs/installation

Imports the Accordion component from the generated UI components folder. Use this import in your project after adding the component.

```typescript
import { Accordion } from "@/components/ui/accordion";
```

--------------------------------

### Use PasswordStrengthInput with onValueChange

Source: https://ui.spectrumhq.in/docs/password-strength

Render the PasswordStrengthInput component and log the value on every keystroke.

```tsx
<PasswordStrengthInput onValueChange={(value) => console.log(value)} />
```

--------------------------------

### Import TextStates component

Source: https://ui.spectrumhq.in/docs/text-states

Import the TextStates component from the local spectrumui components directory. This import is required before using the component in a React or Next.js application.

```tsx
import { TextStates } from "@/components/spectrumui/text-states"
```

--------------------------------

### ShareButton

Source: https://ui.spectrumhq.in/docs/share-button

Renders a round trigger button with aria-expanded and aria-haspopup, and an action row with role="menu". Each entry in actions is a ShareAction: icon, label, and onSelect. When copyValue is set, a copy-link button is prepended that writes to the clipboard and flashes an emerald check.

```APIDOC
## ShareButton

### Description
Renders a round trigger `button` with `aria-expanded` and `aria-haspopup`, and an action row with `role="menu"`. Each entry in `actions` is a `ShareAction`: `icon: React.ReactNode` rendered inside the round button, `label: string` used as the tooltip and accessible name, and `onSelect: () => void` fired on click. When `copyValue` is set, a copy-link button is prepended that writes to the clipboard and flashes an emerald check.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `actions` | `ShareAction[]` | `[]` | Custom actions fanned out after the built-in copy action |
| `copyValue` | `string` | - | URL or text for the built-in copy-link first action; omit to hide it |
| `direction` | `"left" \| "right"` | `"right"` | Side the actions fan out toward |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Visual size of the trigger; actions are one step smaller |
| `label` | `string` | `"Share"` | Accessible name of the trigger |
| `closeOnSelect` | `boolean` | `true` | Collapse the row shortly after a custom action is selected |
| `className` | `string` | - | Additional classes merged onto the root element |

### Usage Example
```jsx
import { ShareButton } from "@/components/spectrumui/share-button"

<ShareButton
  copyValue="https://ui.spectrumhq.in"
  actions={[
    { icon: <Twitter size={15} />, label: "Share on X", onSelect: () => shareOnX() },
  ]}
/>
```
```

--------------------------------

### LikeButton

Source: https://ui.spectrumhq.in/docs/like-button

Renders a single button element with aria-pressed reflecting the liked state. Supports controlled and uncontrolled usage, particle burst animation, and a rolling count display.

```APIDOC
## LikeButton

### Description
Renders a single `button` element with `aria-pressed` reflecting the liked state. Pass `liked` to control it from outside, or `defaultLiked` to let it manage its own state.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `liked` | `boolean` | - | Controlled liked state. Leave undefined for uncontrolled usage. |
| `defaultLiked` | `boolean` | `false` | Initial liked state when uncontrolled. |
| `onLikedChange` | `(liked: boolean) => void` | - | Fires with the next liked state on every toggle. |
| `count` | `number` | - | Like total excluding the current user; +1 is shown while liked. Totals of 1000+ are compacted (1.2K). |
| `showCount` | `boolean` | `true` | Hide the rolling counter even when count is set. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Visual size of the button. |
| `particleColors` | `string[]` | - | Colors cycled across the burst particles. |
| `label` | `string` | `"Like"` | Accessible name of the action. |
| `disabled` | `boolean` | `false` | Disables pointer and keyboard interaction. |
| `className` | `string` | - | Additional classes merged with the default button styles. |

### Usage Example

jsx
import { LikeButton } from "@/components/spectrumui/like-button"

<LikeButton count={128} onLikedChange={(liked) => console.log(liked)} />

```

--------------------------------

### Import NumberTicker component

Source: https://ui.spectrumhq.in/docs/number-ticker

Import the NumberTicker component from the local components/motion directory. This import path is used in the Usage section of the documentation.

```tsx
import { NumberTicker } from "@/components/motion/number-ticker"
```

--------------------------------

### Render TreeNav with items and activeHref

Source: https://ui.spectrumhq.in/docs/tree-nav

Render the TreeNav component with a list of items, an activeHref, and a custom link component.

```tsx
<TreeNav
  items={[
    { label: "Overview", href: "/docs" },
    { label: "Installation", href: "/docs/installation" },
    { label: "Tree Nav", href: "/docs/tree-nav", badge: "New" },
  ]}
  activeHref={pathname}
  linkComponent={Link}
/>
```

--------------------------------

### AnimatedSwitch

Source: https://ui.spectrumhq.in/docs/animated-switch

Renders a single button element with role="switch" and aria-checked reflecting the state. Supports controlled and uncontrolled usage, with callbacks for state changes and customizable icons and sizes.

```APIDOC
## AnimatedSwitch

### Description
Renders a single `button` element with `role="switch"` and `aria-checked` reflecting the state. Pass `checked` to control it from outside, or `defaultChecked` to let it manage its own state.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `checked` | `boolean` | - | Controlled checked state. Leave undefined for uncontrolled usage |
| `defaultChecked` | `boolean` | `false` | Initial checked state when uncontrolled |
| `onCheckedChange` | `(checked: boolean) => void` | - | Fires with the next checked state whenever a toggle commits — by click, keyboard, drag or flick |
| `onIcon` | `React.ReactNode` | - | Icon shown inside the knob while on; crossfades with offIcon on toggle |
| `offIcon` | `React.ReactNode` | - | Icon shown inside the knob while off; crossfades with onIcon on toggle |
| `size` | `"sm" | "md" | "lg"` | `"md"` | Visual size of the switch — 32×18, 44×24 or 56×30 track |
| `disabled` | `boolean` | `false` | Disables pointer and keyboard interaction |
| `label` | `string` | `"Toggle"` | Accessible name of the switch |
| `className` | `string` | - | Additional classes merged with the default track styles |

### Usage Example
```jsx
import { AnimatedSwitch } from "@/components/spectrumui/animated-switch"

<AnimatedSwitch defaultChecked onCheckedChange={(checked) => console.log(checked)} />
```
```

--------------------------------

### Render UndoPill with controlled state

Source: https://ui.spectrumhq.in/docs/undo-pill

Render the UndoPill with open state, label, and callbacks for undo and expire. The component is fully controlled; set open to true to show it and flip it to false from onUndo or onExpire.

```tsx
<UndoPill
  open={open}
  label="Message deleted"
  onUndo={() => restore()}
  onExpire={() => commit()}
/>
```

--------------------------------

### NavListCard usage with items

Source: https://ui.spectrumhq.in/docs/nav-list-card

Renders a titled navigation card. Each item in the array is displayed as a row with an icon and label, and acts as a link if an href is provided.

```jsx
<NavListCard
  title="Support"
  items={[
    { icon: <CircleHelp />, label: "Help Center", href: "/help" },
    { icon: <BookOpen />, label: "Docs", href: "/docs" },
  ]}
/>
```

--------------------------------

### BeamCard Component

Source: https://ui.spectrumhq.in/docs/beam-card

The BeamCard component wraps a card surface in an animated border beam. It accepts props for content, animation size, color variant, theme, and more.

```APIDOC
## BeamCard Component

### Description
Wraps a card surface in an animated border beam. The beam reads the card's own border radius, so it hugs the corners at any size. The rotate family travels around the edge; the pulse family breathes.

### Props

- **eyebrow** (`string`) - Optional - Small mono label above the title
- **title** (`string`) - Optional - Card title
- **description** (`string`) - Optional - Supporting copy under the title
- **children** (`ReactNode`) - Optional - Body content rendered under the description
- **size** (`"md" | "sm" | "pulse-inner" | "pulse-outside"`) - Default: `"md"` - md travels, pulse-inner breathes inside, pulse-outside blooms outward
- **colorVariant** (`"colorful" | "ocean" | "sunset" | "mono"`) - Default: `"colorful"` - Beam palette
- **theme** (`"auto" | "dark" | "light"`) - Default: `"auto"` - auto follows a .dark/.light class on <html>, then the OS preference
- **active** (`boolean`) - Default: `true` - Play, or fade the beam out
- **strength** (`number`) - Default: `1` - Beam intensity from 0 to 1
- **className** (`string`) - Optional - Classes for the inner card

### Usage Example
```jsx
import { BeamCard } from "@/components/spectrumui/beam-card"

<BeamCard
  size="pulse-outside"
  colorVariant="ocean"
  eyebrow="Pro"
  title="Edge inference"
  description="Models run in the region closest to the user."
/>
```
```