preview.json — ui Source File
Architecture documentation for preview.json, a json file in the ui codebase.
Entity Profile
Source Code
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "preview",
"title": "Home",
"registryDependencies": [
"alert-dialog",
"avatar",
"badge",
"button",
"button-group",
"card",
"checkbox",
"combobox",
"dropdown-menu",
"empty",
"field",
"input",
"input-group",
"item",
"label",
"popover",
"radio-group",
"select",
"separator",
"sheet",
"slider",
"spinner",
"switch",
"textarea",
"tooltip",
"example"
],
"files": [
{
"path": "registry/base-mira/blocks/preview.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-mira/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-mira/ui/alert-dialog\"\nimport {\n Avatar,\n AvatarFallback,\n AvatarGroup,\n AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n Combobox,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxInput,\n ComboboxItem,\n ComboboxList,\n} from \"@/registry/base-mira/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-mira/ui/dropdown-menu\"\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyHeader,\n EmptyMedia,\n EmptyTitle,\n} from \"@/registry/base-mira/ui/empty\"\nimport {\n Field,\n FieldContent,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldTitle,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupText,\n InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n Item,\n ItemActions,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n Popover,\n PopoverContent,\n PopoverDescription,\n PopoverHeader,\n PopoverTitle,\n PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport {\n RadioGroup,\n RadioGroupItem,\n} from \"@/registry/base-mira/ui/radio-group\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/base-mira/ui/sheet\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { Spinner } from \"@/registry/base-mira/ui/spinner\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n return (\n <ExampleWrapper>\n <ObservabilityCard />\n <SmallFormExample />\n <FormExample />\n <FieldExamples />\n <ItemExample />\n <ButtonGroupExamples />\n <EmptyAvatarGroup />\n <InputGroupExamples />\n <SheetExample />\n <BadgeExamples />\n </ExampleWrapper>\n )\n}\n\nfunction FieldExamples() {\n const [gpuCount, setGpuCount] = React.useState(8)\n const [value, setValue] = useState([200, 800])\n\n const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n setGpuCount((prevCount) =>\n Math.max(1, Math.min(99, prevCount + adjustment))\n )\n }, [])\n\n const handleGpuInputChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = parseInt(e.target.value, 10)\n if (!isNaN(value) && value >= 1 && value <= 99) {\n setGpuCount(value)\n }\n },\n []\n )\n\n return (\n <Example title=\"Fields\">\n <FieldSet className=\"w-full max-w-md\">\n <FieldGroup>\n <FieldSet>\n <FieldLegend>Compute Environment</FieldLegend>\n <FieldDescription>\n Select the compute environment for your cluster.\n </FieldDescription>\n <RadioGroup defaultValue=\"kubernetes\">\n <FieldLabel htmlFor=\"kubernetes-r2h\">\n <Field orientation=\"horizontal\">\n <FieldContent>\n <FieldTitle>Kubernetes</FieldTitle>\n <FieldDescription>\n Run GPU workloads on a K8s configured cluster. This is the\n default.\n </FieldDescription>\n </FieldContent>\n <RadioGroupItem\n value=\"kubernetes\"\n id=\"kubernetes-r2h\"\n aria-label=\"Kubernetes\"\n />\n </Field>\n </FieldLabel>\n <FieldLabel htmlFor=\"vm-z4k\">\n <Field orientation=\"horizontal\">\n <FieldContent>\n <FieldTitle>Virtual Machine</FieldTitle>\n <FieldDescription>\n Access a VM configured cluster to run workloads. (Coming\n soon)\n </FieldDescription>\n </FieldContent>\n <RadioGroupItem\n value=\"vm\"\n id=\"vm-z4k\"\n aria-label=\"Virtual Machine\"\n />\n </Field>\n </FieldLabel>\n </RadioGroup>\n </FieldSet>\n <FieldSeparator />\n <Field orientation=\"horizontal\">\n <FieldContent>\n <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n Number of GPUs\n </FieldLabel>\n <FieldDescription>You can add more later.</FieldDescription>\n </FieldContent>\n <ButtonGroup>\n <Input\n id=\"number-of-gpus-f6l\"\n value={gpuCount}\n onChange={handleGpuInputChange}\n size={3}\n maxLength={3}\n />\n <Button\n variant=\"outline\"\n size=\"icon\"\n type=\"button\"\n aria-label=\"Decrement\"\n onClick={() => handleGpuAdjustment(-1)}\n disabled={gpuCount <= 1}\n >\n <IconPlaceholder\n lucide=\"MinusIcon\"\n tabler=\"IconMinus\"\n hugeicons=\"MinusSignIcon\"\n phosphor=\"MinusIcon\"\n remixicon=\"RiSubtractLine\"\n />\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon\"\n type=\"button\"\n aria-label=\"Increment\"\n onClick={() => handleGpuAdjustment(1)}\n disabled={gpuCount >= 99}\n >\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n />\n </Button>\n </ButtonGroup>\n </Field>\n <FieldSeparator />\n <Field orientation=\"horizontal\">\n <FieldContent>\n <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n <FieldDescription>\n Allow the wallpaper to be tinted.\n </FieldDescription>\n </FieldContent>\n <Switch id=\"tinting\" defaultChecked />\n </Field>\n <FieldSeparator />\n <FieldLabel htmlFor=\"checkbox-demo\">\n <Field orientation=\"horizontal\">\n <Checkbox id=\"checkbox-demo\" defaultChecked />\n <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n I agree to the terms and conditions\n </FieldLabel>\n </Field>\n </FieldLabel>\n <Field>\n <FieldTitle>Price Range</FieldTitle>\n <FieldDescription>\n Set your budget range ($\n <span className=\"font-medium tabular-nums\">\n {value[0]}\n </span> -{\" \"}\n <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n </FieldDescription>\n <Slider\n value={value}\n onValueChange={(val) => setValue(val as number[])}\n max={1000}\n min={0}\n step={10}\n className=\"mt-2 w-full\"\n aria-label=\"Price Range\"\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 </FieldSet>\n </Example>\n )\n}\n\nfunction ButtonGroupExamples() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n <Example title=\"Button Group\" className=\"items-center justify-center\">\n <div className=\"flex flex-col gap-6\">\n <ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n <IconPlaceholder\n lucide=\"ArrowLeftIcon\"\n tabler=\"IconArrowLeft\"\n hugeicons=\"ArrowLeft01Icon\"\n phosphor=\"ArrowLeftIcon\"\n remixicon=\"RiArrowLeftLine\"\n />\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\" size=\"sm\">\n Archive\n </Button>\n <Button variant=\"outline\" size=\"sm\">\n Report\n </Button>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\" size=\"sm\">\n Snooze\n </Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button\n variant=\"outline\"\n size=\"icon-sm\"\n aria-label=\"More Options\"\n />\n }\n >\n <IconPlaceholder\n lucide=\"ChevronDownIcon\"\n tabler=\"IconChevronDown\"\n hugeicons=\"ArrowDown01Icon\"\n phosphor=\"CaretDownIcon\"\n remixicon=\"RiArrowDownSLine\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-48\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"MailCheckIcon\"\n tabler=\"IconMailCheck\"\n hugeicons=\"MailValidation01Icon\"\n phosphor=\"EnvelopeIcon\"\n remixicon=\"RiMailLine\"\n />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ArchiveIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"ArchiveIcon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n Archive\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ClockIcon\"\n tabler=\"IconClock\"\n hugeicons=\"ClockIcon\"\n phosphor=\"ClockIcon\"\n remixicon=\"RiTimeLine\"\n />\n Snooze\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CalendarPlusIcon\"\n tabler=\"IconCalendarPlus\"\n hugeicons=\"CalendarAdd01Icon\"\n phosphor=\"CalendarPlusIcon\"\n remixicon=\"RiCalendarEventLine\"\n />\n Add to Calendar\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ListFilterIcon\"\n tabler=\"IconFilterPlus\"\n hugeicons=\"AddToListIcon\"\n phosphor=\"ListPlusIcon\"\n remixicon=\"RiPlayListAddLine\"\n />\n Add to List\n </DropdownMenuItem>\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <IconPlaceholder\n lucide=\"TagIcon\"\n tabler=\"IconTag\"\n hugeicons=\"TagIcon\"\n phosphor=\"TagIcon\"\n remixicon=\"RiPriceTagLine\"\n />\n Label As...\n </DropdownMenuSubTrigger>\n <DropdownMenuPortal>\n <DropdownMenuSubContent>\n <DropdownMenuGroup>\n <DropdownMenuRadioGroup\n value={label}\n onValueChange={setLabel}\n >\n <DropdownMenuRadioItem value=\"personal\">\n Personal\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"work\">\n Work\n </DropdownMenuRadioItem>\n <DropdownMenuRadioItem value=\"other\">\n Other\n </DropdownMenuRadioItem>\n </DropdownMenuRadioGroup>\n </DropdownMenuGroup>\n </DropdownMenuSubContent>\n </DropdownMenuPortal>\n </DropdownMenuSub>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"Trash2Icon\"\n tabler=\"IconTrash\"\n hugeicons=\"Delete02Icon\"\n phosphor=\"TrashIcon\"\n remixicon=\"RiDeleteBinLine\"\n />\n Trash\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n <ButtonGroup className=\"hidden sm:flex\">\n <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n <IconPlaceholder\n lucide=\"ArrowLeftIcon\"\n tabler=\"IconArrowLeft\"\n hugeicons=\"ArrowLeft01Icon\"\n phosphor=\"ArrowLeftIcon\"\n remixicon=\"RiArrowLeftLine\"\n />\n </Button>\n <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n <IconPlaceholder\n lucide=\"ArrowRightIcon\"\n tabler=\"IconArrowRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"ArrowRightIcon\"\n remixicon=\"RiArrowRightLine\"\n />\n </Button>\n </ButtonGroup>\n </ButtonGroup>\n <div className=\"flex gap-4\">\n <ButtonGroup className=\"hidden sm:flex\">\n <ButtonGroup>\n <Button variant=\"outline\">1</Button>\n <Button variant=\"outline\">2</Button>\n <Button variant=\"outline\">3</Button>\n </ButtonGroup>\n </ButtonGroup>\n <ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">Follow</Button>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<Button variant=\"outline\" size=\"icon\" />}\n >\n <IconPlaceholder\n lucide=\"ChevronDownIcon\"\n tabler=\"IconChevronDown\"\n hugeicons=\"ArrowDown01Icon\"\n phosphor=\"CaretDownIcon\"\n remixicon=\"RiArrowDownSLine\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-52\">\n <DropdownMenuGroup>\n <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"VolumeX\"\n tabler=\"IconVolume\"\n hugeicons=\"VolumeOffIcon\"\n phosphor=\"SpeakerSlashIcon\"\n remixicon=\"RiVolumeMuteLine\"\n />\n Mute Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CheckIcon\"\n tabler=\"IconCheck\"\n hugeicons=\"Tick02Icon\"\n phosphor=\"CheckIcon\"\n remixicon=\"RiCheckLine\"\n />\n Mark as Read\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"UserRoundXIcon\"\n tabler=\"IconUserX\"\n hugeicons=\"UserRemove01Icon\"\n phosphor=\"UserMinusIcon\"\n remixicon=\"RiUserUnfollowLine\"\n />\n Block User\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ShareIcon\"\n tabler=\"IconShare\"\n hugeicons=\"Share03Icon\"\n phosphor=\"ShareIcon\"\n remixicon=\"RiShareLine\"\n />\n Share Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"Copy01Icon\"\n phosphor=\"CopyIcon\"\n remixicon=\"RiFileCopyLine\"\n />\n Copy Conversation\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"AlertTriangleIcon\"\n tabler=\"IconAlertTriangle\"\n hugeicons=\"AlertCircleIcon\"\n phosphor=\"WarningIcon\"\n remixicon=\"RiErrorWarningLine\"\n />\n Report Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem variant=\"destructive\">\n <IconPlaceholder\n lucide=\"TrashIcon\"\n tabler=\"IconTrash\"\n hugeicons=\"Delete02Icon\"\n phosphor=\"TrashIcon\"\n remixicon=\"RiDeleteBinLine\"\n />\n Delete Conversation\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ButtonGroup>\n <ButtonGroup>\n <Button variant=\"outline\">\n <IconPlaceholder\n lucide=\"BotIcon\"\n tabler=\"IconRobot\"\n hugeicons=\"BotIcon\"\n phosphor=\"RobotIcon\"\n remixicon=\"RiRobotLine\"\n />{\" \"}\n Copilot\n </Button>\n <Popover>\n <PopoverTrigger\n render={\n <Button\n variant=\"outline\"\n size=\"icon\"\n aria-label=\"Open Popover\"\n />\n }\n >\n <IconPlaceholder\n lucide=\"ChevronDownIcon\"\n tabler=\"IconChevronDown\"\n hugeicons=\"ArrowDown01Icon\"\n phosphor=\"CaretDownIcon\"\n remixicon=\"RiArrowDownSLine\"\n />\n </PopoverTrigger>\n <PopoverContent align=\"end\" className=\"w-96\">\n <PopoverHeader>\n <PopoverTitle>Agent Tasks</PopoverTitle>\n <PopoverDescription>\n Describe your task in natural language. Copilot will work\n in the background and open a pull request.\n </PopoverDescription>\n </PopoverHeader>\n <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n <Textarea\n placeholder=\"Describe your task in natural language.\"\n className=\"min-h-32 resize-none\"\n />\n </div>\n </PopoverContent>\n </Popover>\n </ButtonGroup>\n </ButtonGroup>\n </div>\n </div>\n </Example>\n )\n}\n\nfunction InputGroupExamples() {\n const [isFavorite, setIsFavorite] = React.useState(false)\n const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n return (\n <Example title=\"Input Group\">\n <div className=\"flex flex-col gap-6\">\n <InputGroup>\n <InputGroupInput placeholder=\"Search...\" />\n <InputGroupAddon>\n <IconPlaceholder\n lucide=\"SearchIcon\"\n tabler=\"IconSearch\"\n hugeicons=\"Search01Icon\"\n phosphor=\"MagnifyingGlassIcon\"\n remixicon=\"RiSearchLine\"\n />\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n </InputGroup>\n <InputGroup>\n <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n <InputGroupAddon>\n <InputGroupText>https://</InputGroupText>\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n className=\"rounded-full\"\n size=\"icon-xs\"\n aria-label=\"Info\"\n />\n }\n >\n <IconPlaceholder\n lucide=\"InfoIcon\"\n tabler=\"IconInfoCircle\"\n hugeicons=\"AlertCircleIcon\"\n phosphor=\"InfoIcon\"\n remixicon=\"RiInformationLine\"\n />\n </TooltipTrigger>\n <TooltipContent>This is content in a tooltip.</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n <Field>\n <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n Input Secure\n </Label>\n <InputGroup>\n <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n <InputGroupAddon>\n <Popover>\n <PopoverTrigger\n render={\n <InputGroupButton\n variant=\"secondary\"\n size=\"icon-xs\"\n aria-label=\"Info\"\n />\n }\n >\n <IconPlaceholder\n lucide=\"InfoIcon\"\n tabler=\"IconInfoCircle\"\n hugeicons=\"AlertCircleIcon\"\n phosphor=\"InfoIcon\"\n remixicon=\"RiInformationLine\"\n />\n </PopoverTrigger>\n <PopoverContent\n align=\"start\"\n alignOffset={10}\n className=\"flex flex-col gap-1 rounded-xl text-sm\"\n >\n <p className=\"font-medium\">Your connection is not secure.</p>\n <p>\n You should not enter any sensitive information on this site.\n </p>\n </PopoverContent>\n </Popover>\n </InputGroupAddon>\n <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n https://\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <InputGroupButton\n onClick={() => setIsFavorite(!isFavorite)}\n size=\"icon-xs\"\n aria-label=\"Favorite\"\n >\n <IconPlaceholder\n lucide=\"StarIcon\"\n tabler=\"IconStar\"\n hugeicons=\"StarIcon\"\n phosphor=\"StarIcon\"\n remixicon=\"RiStarLine\"\n data-favorite={isFavorite}\n className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n />\n </InputGroupButton>\n </InputGroupAddon>\n </InputGroup>\n </Field>\n <ButtonGroup className=\"w-full\">\n <ButtonGroup>\n <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n />\n </Button>\n </ButtonGroup>\n <ButtonGroup className=\"flex-1\">\n <InputGroup>\n <InputGroupInput\n placeholder={\n voiceEnabled\n ? \"Record and send audio...\"\n : \"Send a message...\"\n }\n disabled={voiceEnabled}\n />\n <InputGroupAddon align=\"inline-end\">\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n onClick={() => setVoiceEnabled(!voiceEnabled)}\n data-active={voiceEnabled}\n className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n aria-pressed={voiceEnabled}\n size=\"icon-xs\"\n aria-label=\"Voice Mode\"\n />\n }\n >\n <IconPlaceholder\n lucide=\"AudioLinesIcon\"\n tabler=\"IconWaveSine\"\n hugeicons=\"AudioWave01Icon\"\n phosphor=\"MicrophoneIcon\"\n remixicon=\"RiMicLine\"\n />\n </TooltipTrigger>\n <TooltipContent>Voice Mode</TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n </ButtonGroup>\n </ButtonGroup>\n <InputGroup>\n <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n <InputGroupAddon align=\"block-end\">\n <InputGroupButton\n variant=\"outline\"\n className=\"style-lyra:rounded-none rounded-full\"\n size=\"icon-xs\"\n aria-label=\"Add\"\n >\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n />\n </InputGroupButton>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={<InputGroupButton variant=\"ghost\" />}\n >\n Auto\n </DropdownMenuTrigger>\n <DropdownMenuContent\n side=\"top\"\n align=\"start\"\n className=\"[--radius:0.95rem]\"\n >\n <DropdownMenuGroup>\n <DropdownMenuItem>Auto</DropdownMenuItem>\n <DropdownMenuItem>Agent</DropdownMenuItem>\n <DropdownMenuItem>Manual</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n <Separator orientation=\"vertical\" className=\"!h-4\" />\n <InputGroupButton\n variant=\"default\"\n className=\"style-lyra:rounded-none rounded-full\"\n size=\"icon-xs\"\n >\n <IconPlaceholder\n lucide=\"ArrowUpIcon\"\n tabler=\"IconArrowUp\"\n hugeicons=\"ArrowUp01Icon\"\n phosphor=\"ArrowUpIcon\"\n remixicon=\"RiArrowUpLine\"\n />\n <span className=\"sr-only\">Send</span>\n </InputGroupButton>\n </InputGroupAddon>\n </InputGroup>\n </div>\n </Example>\n )\n}\n\nfunction EmptyAvatarGroup() {\n return (\n <Example title=\"Empty\">\n <Empty className=\"h-full flex-none border\">\n <EmptyHeader>\n <EmptyMedia>\n <AvatarGroup className=\"grayscale\">\n <Avatar size=\"lg\">\n <AvatarImage\n src=\"https://github.com/shadcn.png\"\n alt=\"@shadcn\"\n />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n <Avatar size=\"lg\">\n <AvatarImage\n src=\"https://github.com/maxleiter.png\"\n alt=\"@maxleiter\"\n />\n <AvatarFallback>LR</AvatarFallback>\n </Avatar>\n <Avatar size=\"lg\">\n <AvatarImage\n src=\"https://github.com/evilrabbit.png\"\n alt=\"@evilrabbit\"\n />\n <AvatarFallback>ER</AvatarFallback>\n </Avatar>\n </AvatarGroup>\n </EmptyMedia>\n <EmptyTitle>No Team Members</EmptyTitle>\n <EmptyDescription>\n Invite your team to collaborate on this project.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <div className=\"flex gap-2\">\n <AlertDialog>\n <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n Show Dialog\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete\n your account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction>Continue</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n <AlertDialog>\n <AlertDialogTrigger render={<Button />}>\n Connect Mouse\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>\n Allow accessory to connect?\n </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't allow</AlertDialogCancel>\n <AlertDialogAction>Allow</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n </div>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n\nfunction FormExample() {\n const monthItems = [\n { label: \"MM\", value: null },\n { label: \"01\", value: \"01\" },\n { label: \"02\", value: \"02\" },\n { label: \"03\", value: \"03\" },\n { label: \"04\", value: \"04\" },\n { label: \"05\", value: \"05\" },\n { label: \"06\", value: \"06\" },\n { label: \"07\", value: \"07\" },\n { label: \"08\", value: \"08\" },\n { label: \"09\", value: \"09\" },\n { label: \"10\", value: \"10\" },\n { label: \"11\", value: \"11\" },\n { label: \"12\", value: \"12\" },\n ]\n\n const yearItems = [\n { label: \"YYYY\", value: null },\n { label: \"2024\", value: \"2024\" },\n { label: \"2025\", value: \"2025\" },\n { label: \"2026\", value: \"2026\" },\n { label: \"2027\", value: \"2027\" },\n { label: \"2028\", value: \"2028\" },\n { label: \"2029\", value: \"2029\" },\n ]\n\n return (\n <Example title=\"Complex Form\">\n <Card className=\"w-full max-w-md\">\n <CardHeader>\n <CardTitle>Payment Method</CardTitle>\n <CardDescription>\n All transactions are secure and encrypted\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form>\n <FieldGroup>\n <FieldSet>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n Name on Card\n </FieldLabel>\n <Input\n id=\"checkout-7j9-card-name-43j\"\n placeholder=\"John Doe\"\n required\n />\n </Field>\n <div className=\"grid grid-cols-3 gap-4\">\n <Field className=\"col-span-2\">\n <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n Card Number\n </FieldLabel>\n <Input\n id=\"checkout-7j9-card-number-uw1\"\n placeholder=\"1234 5678 9012 3456\"\n required\n />\n <FieldDescription>\n Enter your 16-digit number.\n </FieldDescription>\n </Field>\n <Field className=\"col-span-1\">\n <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n </Field>\n </div>\n <div className=\"grid grid-cols-2 gap-4\">\n <Field>\n <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n Month\n </FieldLabel>\n <Select items={monthItems} defaultValue={null}>\n <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n {monthItems.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 <Field>\n <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n Year\n </FieldLabel>\n <Select items={yearItems} defaultValue={null}>\n <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n {yearItems.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 </FieldGroup>\n </FieldSet>\n <FieldSeparator />\n <FieldSet>\n <FieldLegend>Billing Address</FieldLegend>\n <FieldDescription>\n The billing address associated with your payment.\n </FieldDescription>\n <FieldGroup>\n <Field orientation=\"horizontal\">\n <Checkbox\n id=\"checkout-7j9-same-as-shipping-wgm\"\n defaultChecked\n />\n <FieldLabel\n htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n className=\"font-normal\"\n >\n Same as shipping address\n </FieldLabel>\n </Field>\n </FieldGroup>\n </FieldSet>\n <FieldSeparator />\n <FieldSet>\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n Comments\n </FieldLabel>\n <Textarea\n id=\"checkout-7j9-optional-comments\"\n placeholder=\"Add any additional comments\"\n />\n </Field>\n </FieldGroup>\n </FieldSet>\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\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 SmallFormExample() {\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\n align=\"end\"\n className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n >\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 <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\nfunction ObservabilityCard() {\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 <Button>\n Create Query{\" \"}\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n data-icon=\"inline-end\"\n />\n </Button>\n <Badge variant=\"secondary\" className=\"ml-auto\">\n Warning\n </Badge>\n </CardFooter>\n </Card>\n </Example>\n )\n}\n\nfunction ItemExample() {\n return (\n <Example title=\"Item\">\n <div className=\"flex w-full max-w-md flex-col gap-6\">\n <Item variant=\"outline\">\n <ItemContent>\n <ItemTitle>Two-factor authentication</ItemTitle>\n <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n Verify via email or phone number.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\" variant=\"secondary\">\n Enable\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"ShoppingBagIcon\"\n tabler=\"IconShoppingBag\"\n hugeicons=\"ShoppingBasket01Icon\"\n phosphor=\"BagIcon\"\n remixicon=\"RiShoppingBagLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Your order has been shipped.</ItemTitle>\n </ItemContent>\n </Item>\n </div>\n </Example>\n )\n}\n\nfunction BadgeExamples() {\n return (\n <Example title=\"Badge\" className=\"items-center justify-center\">\n <div className=\"flex items-center justify-center gap-2\">\n <Badge>\n <Spinner data-icon=\"inline-start\" />\n Syncing\n </Badge>\n <Badge variant=\"secondary\">\n <Spinner data-icon=\"inline-start\" />\n Updating\n </Badge>\n <Badge variant=\"outline\">\n <Spinner data-icon=\"inline-start\" />\n Loading\n </Badge>\n <Badge variant=\"link\" className=\"hidden sm:flex\">\n <Spinner data-icon=\"inline-start\" />\n Link\n </Badge>\n </div>\n </Example>\n )\n}\n\nfunction EmptyWithSpinner() {\n return (\n <Example title=\"Empty with Spinner\">\n <Empty className=\"w-full border\">\n <EmptyHeader>\n <EmptyMedia variant=\"icon\">\n <Spinner />\n </EmptyMedia>\n <EmptyTitle>Processing your request</EmptyTitle>\n <EmptyDescription>\n Please wait while we process your request. Do not refresh the page.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <div className=\"flex gap-2\">\n <Button size=\"sm\">Submit</Button>\n <Button variant=\"outline\" size=\"sm\">\n Cancel\n </Button>\n </div>\n </EmptyContent>\n </Empty>\n </Example>\n )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n return (\n <Example title=\"Sheet\">\n <div className=\"flex gap-2\">\n {SHEET_SIDES.map((side) => (\n <Sheet key={side}>\n <SheetTrigger\n render={\n <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n }\n >\n {side}\n </SheetTrigger>\n <SheetContent\n side={side}\n className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n >\n <SheetHeader>\n <SheetTitle>Edit profile</SheetTitle>\n <SheetDescription>\n Make changes to your profile here. Click save when you're\n done.\n </SheetDescription>\n </SheetHeader>\n <div className=\"overflow-y-auto px-4 text-sm\">\n {Array.from({ length: 10 }).map((_, index) => (\n <p\n key={index}\n className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n >\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia\n deserunt mollit anim id est laborum.\n </p>\n ))}\n </div>\n <SheetFooter>\n <Button type=\"submit\">Save changes</Button>\n <SheetClose render={<Button variant=\"outline\" />}>\n Cancel\n </SheetClose>\n </SheetFooter>\n </SheetContent>\n </Sheet>\n ))}\n </div>\n </Example>\n )\n}\n",
"type": "registry:block"
}
],
"type": "registry:block"
}Source
Frequently Asked Questions
What does preview.json do?
preview.json is a source file in the ui codebase, written in json.
Where is preview.json in the architecture?
preview.json is located at apps/v4/public/r/styles/base-mira/preview.json (directory: apps/v4/public/r/styles/base-mira).
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free