Composed React components for shadcn, on Base UI.

Install any item with the shadcn CLI from its URL. The code it writes is yours.

bash

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/status-indicator.json

Components

Hello - any updates?

Assistant

Looking now - will report back shortly.

Chat Message

TypeScript

function greet(name: string): string {
  return `Hello, ${name}!`;
}

Code Block

src
- index.ts
- util.ts
README.md

File Tree

designui

Tag Input

Password Input

Online

Connecting

Idle

Busy

Offline

Status Indicator

Blocks

See the blocks

How it installs

1. Add an item with the shadcn CLI

bash

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/status-indicator.json

2. The CLI writes it into your app

text

components/feedback/status-indicator.tsx
lib/status-tone.ts

3. Import it and compose

tsx

import { StatusIndicator } from '@/components/feedback/status-indicator';

<div className="flex items-center gap-2">
  <StatusIndicator tone="online" />
  <span>Online</span>
</div>