component-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "component-example",
  "title": "Example",
  "registryDependencies": [
    "alert-dialog",
    "badge",
    "button",
    "card",
    "combobox",
    "dropdown-menu",
    "field",
    "input",
    "select",
    "textarea",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-maia/examples/component-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-maia/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}