Preview
Try signing the guestbook below! (entries are stored in memory)
Installation
npx shadcn@latest add https://retro90s.dev/r/guestbook.jsonUsage
import { Guestbook, GuestbookEntry } from "@/components/ui/guestbook"
export function MyGuestbook() {
const [entries, setEntries] = useState<GuestbookEntry[]>([])
const handleSubmit = (entry) => {
const newEntry = {
...entry,
id: Date.now().toString(),
timestamp: new Date(),
}
setEntries([newEntry, ...entries])
}
return (
<Guestbook
entries={entries}
onEntrySubmit={handleSubmit}
showWebsiteField
/>
)
}Features
- Windows 95 style form fields
- Name and message fields (required)
- Optional email field
- Optional website field with links
- Character counter for messages
- Animated submit button
- Timestamped entries display
- Avatar with initial letter
Props
| Prop | Type | Default |
|---|---|---|
| entries | GuestbookEntry[] | [] |
| onEntrySubmit | (entry) => void | - |
| maxMessageLength | number | 500 |
| showEmailField | boolean | false |
| showWebsiteField | boolean | true |
| title | string | "Sign My Guestbook!" |
GuestbookEntry Type
interface GuestbookEntry {
id: string
name: string
message: string
timestamp: Date
email?: string
website?: string
}