Vela UI Docs
venizia.ai

Form Editor

The Builder workspace for an AI-generated form: a chat pane where describing the employee (or attaching a CV) fills the document on the right, previewed blank as the "Hồ sơ nhân sự" HR profile with its personal- and work-information sections, under a device/live-edit/publish toolbar. App shell folded to its icon rail.

Form Editor

@velaui/form-editor
@velaui/form-editorOpen Open
pnpm dlx velaui add @velaui/form-editor

Built from

  1. AvatarAn image element with a fallback for representing the user.
  2. BadgeDisplays a badge or a component that looks like a badge.
  3. ButtonDisplays a button or a component that looks like a button.
  4. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  5. Input GroupAdd addons, buttons, and helper content to inputs.
  6. SegmentedA set of mutually exclusive options inside a single inline container.
  7. SeparatorVisually or semantically separates content.
  8. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  9. SwitchA control that toggles between checked and unchecked states.
  10. 19 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import FormEditor from "@/components/blocks/form-editor/form-editor";

export default function Page() {
  return <FormEditor />;
}

Form Editor Chat

@velaui/form-editor-chat
@velaui/form-editor-chatOpen Open
pnpm dlx velaui add @velaui/form-editor-chat

Built from

  1. AvatarAn image element with a fallback for representing the user.
  2. BadgeDisplays a badge or a component that looks like a badge.
  3. ButtonDisplays a button or a component that looks like a button.
  4. Dropdown MenuA menu of actions, checkbox items or radio items that opens from a trigger.
  5. Input GroupAdd addons, buttons, and helper content to inputs.
  6. SegmentedA set of mutually exclusive options inside a single inline container.
  7. SeparatorVisually or semantically separates content.
  8. SidebarA collapsible app navigation rail with grouped menus, submenus, and an account card.
  9. SwitchA control that toggles between checked and unchecked states.
  10. 22 iconsFrom the Vela UI icon set, installed with the block.

Mount it in a route

// app/page.tsx
import FormEditorChat from "@/components/blocks/form-editor-chat/form-editor-chat";

export default function Page() {
  return <FormEditorChat />;
}