Hello World

harshkanjiya/hello-world

FreeComponent

A simple animated greeting component.

Live preview

live · rendered by the registry

Rendered by harshkanjiya on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://harshkanjiya.com/r/hello-world.json

Source

components/hello-world/hello-world.tsxharshkanjiya.com/r/hello-world.json

1import { cn } from "@/lib/utils"
2
3interface HelloWorldProps {
4  name?: string
5  className?: string
6}
7
8export function HelloWorld({ name = "World", className }: HelloWorldProps) {
9  return (
10    <div
11      className={cn(
12        "flex items-center gap-2 rounded-xl border border-edge bg-muted/40 px-4 py-3 font-mono text-sm",
13        className
14      )}
15    >
16      <span className="animate-pulse text-green-500">●</span>
17      <span>
18        Hello, <span className="font-semibold text-foreground">{name}</span>!
19      </span>
20    </div>
21  )
22}

What it pulls in

Other registry items

utils

Files it writes

components/hello-world/hello-world.tsx
components/hello-world/index.ts

More from harshkanjiya

All 6 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Pintch Switchpintch-switch	harshkanjiya	Components	Free	no deps · 4 files
Realistic Buttonrealistic-button	harshkanjiya	Components	Free	no deps · 4 files
Shutter CTAshutter-cta	harshkanjiya	Components	Free	no deps · 2 files
Toggletoggle	harshkanjiya	Components	Free	no deps · 4 files