Registry Add Command

About this piece

The one line that installs a component from an open registry, with the files it writes ticking off underneath it one after another.

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

npx shadcn@latest add https://ui.beste.co/r/hero181.json

components/hero181.tsx

components/ui/button.tsx

MIT licensed, no account needed

Usage

import { Code16 } from "@/components/beste/component/code16";

<Code16
  command="npx shadcn@latest add https://ui.beste.co/r/hero181.json"
  files={["components/hero181.tsx","components/ui/button.tsx"]}
  note="MIT licensed, no account needed"
/>

Usage

The import and the props worth knowing about, in one place.

import { Code16 } from "@/components/beste/piece/code16";

<Code16
  surface="card"
  bordered={true}
  inverted={false}
  command="npx shadcn@latest add https://ui.beste.co/r/hero181.json"
  files={[
    "components/hero181.tsx",
    "components/ui/button.tsx"
  ]}
  note="MIT licensed, no account needed"
  stepMs={520}
/>

More Code pieces

View all Code

bun add @beste/ui

Shell Command

Single-line install or run command, prefixed with a dollar sign in monospace.

pricing.ts0 added, 0 removed

 import { coupon } from "./coupon"
  
 export function total(cart: Cart) {
-  const sum = cart.lines.reduce(add, 0)
-  return sum
+  const sum = cart.lines.reduce(add, 0)
+  const discount = coupon(cart, sum)
+  return sum - discount
 }

Diff Reveal

Code diff whose removed and added lines slide into place one after another on mount, with the header tallying added and removed counts as they land.

const greeting = "Hello, Beste!";ts

Code Line

One-line code snippet with a monospace pill and a tiny language tag on the right.

curl-XPOSThttps://api.beste.co/v1/users

-H"Authorization: Bearer sk_live_..."

-H"Content-Type: application/json"

-d'{"name": "Ada Lovelace"}'

cURL Command

HTTP request rendered as a curl invocation with method, URL, headers, and body across continued lines.

Open command palette

⌘K

Keyboard Shortcut

Action label paired with a row of monospace key caps joined by plus separators.

greet.ts

1export function greet(name: string) {
2  return `Hello, ${name}!`;
3}
4 
5console.log(greet("Beste"));

Code Snippet Card

Dark editor card with three traffic-light dots, a filename tab, and line-numbered code.