Component · May 20, 2026
A simple stateful button. The baseline every component library starts with.
'use client'
import { useState } from 'react'
export default function HelloButton() {
const [count, setCount] = useState(0)
return (
<div className="flex flex-col items-center gap-3">
<button
type="button"
onClick={() => setCount((n) => n + 1)}
className="rounded-md border border-(--color-border-strong) bg-(--color-surface) px-4 py-2 text-sm text-(--color-fg) transition-colors hover:bg-(--color-surface-hover)"
>
Hello
</button>
<span className="font-mono text-xs text-(--color-fg-subtle)">clicked {count}×</span>
</div>
)
}
Every component library starts somewhere. This is the simplest possible interactive
component: a button that increments a counter. No animation, no state machine, just
useState and a click handler.
The value here is infrastructure: the surrounding scaffolding handles schema validation, Shiki source highlighting at build time, and Next bundling the component for live rendering in the frame. The real components built on top of this pipeline are the ones in the rest of the catalog.