A portfolio profile editor with a live preview card beside the form, a photo upload, link rows you can add and remove, skill chips and a card color picker.
npx shadcn@latest add https://hyperblur.dev/r/app-profile-editor.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/app-profile-editor.tsx.
import { AppProfileEditor } from "@/components/hyperblur/app-profile-editor"
<AppProfileEditor onPublish={(profile) => console.log(profile)} />| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | Partial<AppProfileValue> | Initial name, headline, location, bio, available, theme, links, tags and avatar. Missing keys use the built-in sample. | |
| handle | string | "folio.page/maya" | Public address shown in the header and the publish message. |
| themes | string[] | six colors | Card colors offered in the color picker. |
| maxLinks | number | 6 | Most link rows allowed. |
| maxTags | number | 8 | Most skill chips allowed. |
| onChange | (value: AppProfileValue) => void | Called on every edit with the full profile. | |
| onPublish | (value: AppProfileValue) => void | Called when Publish is pressed. |