[ { "name": "Accordion", "description": "A vertically stacked set of interactive headings that each reveal a section of content.", "docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\accordion.mdx", "docs": { "import": { "source": "accordion.mdx", "code": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from "@/components/ui/accordion"" }, "use": [ { "source": "accordion.mdx", "code": "<Accordion type="single" collapsible>\n <AccordionItem value="item-1">\n Is it accessible?\n \n Yes. It adheres to the WAI-ARIA design pattern.\n \n \n" } ], "examples": [ { "source": "accordion-demo.tsx", "code": "import {\r\n Accordion,\r\n AccordionContent,\r\n AccordionItem,\r\n AccordionTrigger,\r\n} from "@/components/ui/accordion"\r\n\r\nexport default function AccordionDemo() {\r\n return (\r\n <Accordion type="single" collapsible className="w-full">\r\n <AccordionItem value="item-1">\r\n Is it accessible?\r\n \r\n Yes. It adheres to the WAI-ARIA design pattern.\r\n \r\n \r\n <AccordionItem value="item-2">\r\n Is it styled?\r\n \r\n Yes. It comes with default styles that matches the other\r\n components' aesthetic.\r\n \r\n \r\n <AccordionItem value="item-3">\r\n Is it animated?\r\n \r\n Yes. It's animated by default, but you can disable it if you\r\n prefer.\r\n \r\n \r\n \r\n )\r\n}" } ] } }, { "name": "Alert Dialog", "description": "A modal dialog that interrupts the user with important content and expects a response.", "docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\alert-dialog.mdx", "docs": { "import": { "source": "alert-dialog.mdx", "code": "import {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from "@/components/ui/alert-dialog"" }, "use": [ { "source": "alert-dialog.mdx", "code": "\n Open\n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete your account\n and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n" } ], "examples": [ { "source": "alert-dialog-demo.tsx", "code": "import {\r\n AlertDialog,\r\n AlertDialogAction,\r\n AlertDialogCancel,\r\n AlertDialogContent,\r\n AlertDialogDescription,\r\n AlertDialogFooter,\r\n AlertDialogHeader,\r\n AlertDialogTitle,\r\n AlertDialogTrigger,\r\n} from "@/components/ui/alert-dialog"\r\nimport { Button } from "@/components/ui/button"\r\n\r\nexport default function AlertDialogDemo() {\r\n return (\r\n \r\n \r\n <Button variant="outline">Show Dialog\r\n \r\n \r\n \r\n Are you absolutely sure?\r\n \r\n This action cannot be undone. This will permanently delete your\r\n account and remove your data from our servers.\r\n \r\n \r\n \r\n Cancel\r\n Continue\r\n \r\n \r\n \r\n )\r\n}" } ] } }, { "name": "Alert", "description": "Displays a callout for user attention.", "docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\alert.mdx", "docs": { "import": { "source": "alert.mdx", "code": "import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"" }, "use": [ { "source": "alert.mdx", "code": "\n <Terminal className="h-4 w-4" />\n Heads up!\n \n You can add components and dependencies to your app using the cli.\n \n" } ], "examples": [ { "source": "alert-demo.tsx", "code": "import { Terminal, Waves } from "lucide-react"\r\n\r\nimport {\r\n Alert,\r\n AlertDescription,\r\n AlertTitle,\r\n} from "@/components/ui/alert"\r\n\r\nexport default function AlertDemo() {\r\n return (\r\n \r\n <Terminal className="h-4 w-4" />\r\n Heads up!\r\n \r\n You can add components to your app using the cli.\r\n \r\n \r\n )\r\n}" }, { "source": "alert-destructive.tsx", "code": "import { AlertCircle, FileWarning, Terminal } from "lucide-react"\r\n\r\nimport {\r\n Alert,\r\n AlertDescription,\r\n AlertTitle,\r\n} from "@/components/ui/alert"\r\n\r\nexport default function AlertDestructive() {\r\n return (\r\n <Alert variant="destructive">\r\n <AlertCircle className="h-4 w-4" />\r\n Error\r\n \r\n Your session has expired. Please log in again.\r\n \r\n \r\n )\r\n}" }, { "source": "alert-dialog-demo.tsx", "code": "import {\r\n AlertDialog,\r\n AlertDialogAction,\r\n AlertDialogCancel,\r\n AlertDialogContent,\r\n AlertDialogDescription,\r\n AlertDialogFooter,\r\n AlertDialogHeader,\r\n AlertDialogTitle,\r\n AlertDialogTrigger,\r\n} from "@/components/ui/alert-dialog"\r\nimport { Button } from "@/components/ui/button"\r\n\r\nexport default function AlertDialogDemo() {\r\n return (\r\n \r\n \r\n <Button variant="outline">Show Dialog\r\n \r\n \r\n \r\n Are you absolutely sure?\r\n \r\n This action cannot be undone. This will permanently delete your\r\n account and remove your data from our servers.\r\n \r\n \r\n \r\n Cancel\r\n Continue\r\n \r\n \r\n \r\n )\r\n}" } ] } }, { "name": "Aspect Ratio", "description": "Displays content within a desired ratio.", "docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\aspect-ratio.mdx", "docs": { "import": { "source": "aspect-ratio.mdx", "code": "import { AspectRatio } from "@/components/ui/aspect-ratio"" }, "use": [ { "source": "aspect-ratio.mdx", "code": "<div className="w-[450px]">\n <AspectRatio ratio={16 / 9}>\n <img src="..." alt="Image" className="rounded-md object-cover" />\n \n" } ], "examples": [ { "source": "aspect-ratio-demo.tsx", "code": "import Image from "next/image"\r\n\r\nimport { AspectRatio } from "@/components/ui/aspect-ratio"\r\n\r\nexport default function AspectRatioDemo() {\r\n return (\r\n <AspectRatio ratio={16 / 9} className="bg-muted">\r\n <Image\r\n src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"\r\n alt="Photo by Drew Beamer"\r\n fill\r\n className="rounded-md object-cover"\r\n />\r\n \r\n )\r\n}" } ] } }, { "name": "Avatar", "description": "An image element with a fallback for representing the user.", "docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\avatar.mdx", "docs": { "import": { "source": "avatar.mdx", "code": "import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"" }, "use": [ { "source": "avatar.mdx", "code": "\n <AvatarImage src="https://github.com/shadcn.png" />\n CN\n" } ], "examples": [ { "source": "avatar-demo.tsx", "code": "import {\r\n Avatar,\r\n AvatarFallback,\r\n AvatarImage,\r\n} from "@/components/ui/avatar"\r\n\r\nexport default function AvatarDemo() {\r\n return (\r\n \r\n <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />\r\n CN\r\n \r\n )\r\n}" } ] } }, { "name": "Badge", "description": "Displays a badge or a component that looks like a badge.", "docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\badge.mdx", "docs": { "import": { "source": "badge.mdx", "code": "import { Badge } from "@/components/ui/badge"" }, "use": [ { "source": "badge.mdx", "code": "<Badge variant="outline">Badge" }, { "source": "badge.mdx", "code": "import { badgeVariants } from "@/components/ui/badge"\n<Link className={badgeVariants({ variant: "outline" })}>Badge" } ], "examples": [ { "source": "badge-demo.tsx", "code": "import { Badge } from "@/components/ui/badge"\r\n\r\nexport default function BadgeDemo() {\r\n return Badge\r\n}" }, { "source": "badge-destructive.tsx", "code": "import { Badge } from "@/components/ui/badge"\r\n\r\nexport default function BadgeDestructive() {\r\n return <Badge variant="destructive">Destructive\r\n}" }, { "source": "badge-outline.tsx", "code": "import { Badge } from "@/components/ui/badge"\r\n\r\nexport default function BadgeOutline() {\r\n return <Badge variant="outline">Outline\r\n}" }, { "source": "badge-secondary.tsx", "code": "import { Badge } from "@/components/ui/badge"\r\n\r\nexport default function BadgeSecondary() {\r\n return <Badge variant="secondary">Secondary\r\n}" } ] } }, { "name": "Button", "description": "Displays a button or a component that looks like a button.", "docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\button.mdx", "docs": { "import": { "source": "button.mdx", "code": "import { Button } from "@/components/ui/button"" }, "use": [ { "source": "button.mdx", "code": "<Button variant="outline">Button" }, { "source": "button.mdx", "code": "import { buttonVariants } from "@/components/ui/button"\n<Link className={buttonVariants({ variant: "outline" })}>Click here" } ], "examples": [ { "source": "button-as-child.tsx", "code": "import Link from "next/link"\r\n\r\nimport { Button } from "@/components/ui/button"\r\n\r\nexport default function ButtonAsChild() {\r\n return (\r\n \r\n <Link href="/login">Login\r\n \r\n )\r\n}" }, { "source": "button-demo.tsx", "code": "import { Button } from "@/components/ui/button"\r\n\r\nexport default function ButtonDemo() {\r\n return Button\r\n}" }, { "source": "button-destructive.tsx", "code": "import { Button } from "@/components/ui/button"\r\n\r\nexport default function ButtonDestructive() {\r\n return <Button variant="destructive">Destructive\r\n}" }, { "source": "button-ghost.tsx", "code": "import { Button } from "@/components/ui/button"\r\n\r\nexport default function ButtonGhost() {\r\n return <Button variant="ghost">Ghost\r\n}" }, { "source": "button-icon.tsx", "code": "import { ChevronRight } from "lucide-react"\r\n\r\nimport { Button } from "@/components/ui/button"\r\n\r\nexport default function ButtonIcon() {\r\n return (\r\n <Button variant="outline" size="icon">\r\n <ChevronRight className="h-4 w-4" />\r\n \r\n )\r\n}" }, { "source": "button-link.tsx", "code": "import { Button } from "@/components/ui/button"\r\n\r\nexport default function ButtonLink() {\r\n return <Button variant="link">Link\r\n}" }, { "source": "button-loading.tsx", "code": "import { Loader2 } from "lucide-react"\r\n\r\nimport { Button } from "@/components/ui/button"\r\n\r\nexport default function ButtonLoading() {\r\n return (\r\n \r\n <Loader2 className="mr-2 h-4 w-4 animate-spin" />\r\n Please wait\r\n \r\n )\r\n}" }, { "source": "button-outline.tsx", "code": "import { Button } from "@/components/ui/button"\r\n\r\nexport default function ButtonOutline() {\r\n return <Button variant="outline">Outline\r\n}" }, { "source": "button-secondary.tsx", "code": "import { Button } from "@/components/ui/button"\r\n\r\nexport default function ButtonSecondary() {\r\n return <Button variant="secondary">Secondary\r\n}" }, { "source": "button-with-icon.tsx", "code": "import { Mail } from "lucide-react"\r\n\r\nimport { Button } from "@/components/ui/button"\r\n\r\nexport default function ButtonWithIcon() {\r\n return (\r\n \r\n <Mail className="mr-2 h-4 w-4" /> Login with Email\r\n \r\n )\r\n}" } ] } }, { "name": "Calendar", "description": "A date field component that allows users to enter and edit date.", "docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\calendar.mdx", "docs": { "import": { "source": "calendar.mdx", "code": "import { Calendar } from "@/components/ui/calendar"" }, "use": [ { "source": "calendar.mdx", "code": "<Calendar\n mode="single"\n selected={date}\n onSelect={setDate}\n className="rounded-md border"\n/>" } ], "examples": [ { "source": "calendar-demo.tsx", "code": ""use client"\r\n\r\nimport * as React from "react"\r\n\r\nimport { Calendar } from "@/components/ui/calendar"\r\n\r\nexport default function CalendarDemo() {\r\n const [date, setDate] = React.useState<Date | undefined>(new Date())\r\n\r\n return (\r\n <Calendar\r\n mode="single"\r\n selected={date}\r\n onSelect={setDate}\r\n className="rounded-md border"\r\n />\r\n )\r\n}" } ] } }, { "name": "Card", "description": "Displays a card with header, content, and footer.", "docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\card.mdx", "docs": { "import": { "source": "card.mdx", "code": "import {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from "@/components/ui/card"" }, "use": [ { "source": "card.mdx", "code": "\n \n Card Title\n Card Description\n \n \n
Card Content
\n \n \nCard Footer
\n \n" } ], "examples": [ { "source": "card-demo.tsx", "code": "import { BellRing, Check } from "lucide-react"\r\n\r\nimport { cn } from "@/lib/utils"\r\nimport { Button } from "@/components/ui/button"\r\nimport {\r\n Card,\r\n CardContent,\r\n CardDescription,\r\n CardFooter,\r\n CardHeader,\r\n CardTitle,\r\n} from "@/components/ui/card"\r\nimport { Separator } from "@/components/ui/separator"\r\nimport { Switch } from "@/components/ui/switch"\r\n\r\nconst notifications = [\r\n {\r\n title: "Your call has been confirmed.",\r\n description: "1 hour ago",\r\n },\r\n {\r\n title: "You have a new message!",\r\n description: "1 hour ago",\r\n },\r\n {\r\n title: "Your subscription is expiring soon!",\r\n description: "2 hours ago",\r\n },\r\n]\r\n\r\ntype CardProps = React.ComponentProps\r\n\r\nexport default function CardDemo({ className, ...props }: CardProps) {\r\n return (\r\n <Card className={cn("w-[380px]", className)} {...props}>\r\n \r\n Notifications\r\n You have 3 unread messages.\r\n \r\n <CardContent className="grid gap-4">\r\n <div className=" flex items-center space-x-4 rounded-md border p-4">\r\n \r\n <div className="flex-1 space-y-1">\r\n <p className="text-sm font-medium leading-none">\r\n Push Notifications\r\n \r\n <p className="text-sm text-muted-foreground">\r\n Send notifications to device.\r\n \r\n \r\n \r\n \r\n\r\n {notifications.map((notification, index) => (\r\n <div\r\n key={index}\r\n className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"\r\n >\r\n <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />\r\n <div className="space-y-1">\r\n <p className="text-sm font-medium leading-none">\r\n {notification.title}\r\n \r\n <p className="text-sm text-muted-foreground">\r\n {notification.description}\r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n \r\n <Button className="w-full">\r\n <Check className="mr-2 h-4 w-4" /> Mark all as read\r\n \r\n \r\n \r\n )\r\n}"
},
{
"source": "card-with-form.tsx",
"code": "import * as React from "react"\r\n\r\nimport { Button } from "@/components/ui/button"\r\nimport {\r\n Card,\r\n CardContent,\r\n CardDescription,\r\n CardFooter,\r\n CardHeader,\r\n CardTitle,\r\n} from "@/components/ui/card"\r\nimport { Input } from "@/components/ui/input"\r\nimport { Label } from "@/components/ui/label"\r\nimport {\r\n Select,\r\n SelectContent,\r\n SelectItem,\r\n SelectTrigger,\r\n SelectValue,\r\n} from "@/components/ui/select"\r\n\r\nexport default function CardWithForm() {\r\n return (\r\n <Card className="w-[350px]">\r\n \r\n Create project\r\n Deploy your new project in one-click.\r\n \r\n \r\n \r\n <div className="grid w-full items-center gap-4">\r\n <div className="flex flex-col space-y-1.5">\r\n <Label htmlFor="name">Name\r\n <Input id="name" placeholder="Name of your project" />\r\n \r\n <div className="flex flex-col space-y-1.5">\r\n <Label htmlFor="framework">Framework\r\n \r\n <SelectTrigger id="framework">\r\n <SelectValue placeholder="Select" />\r\n \r\n <SelectContent position="popper">\r\n <SelectItem value="next">Next.js\r\n <SelectItem value="sveltekit">SvelteKit\r\n <SelectItem value="astro">Astro\r\n <SelectItem value="nuxt">Nuxt.js\r\n \r\n \r\n \r\n \r\n \r\n \r\n <CardFooter className="flex justify-between">\r\n <Button variant="outline">Cancel\r\n Deploy\r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Checkbox",
"description": "A control that allows the user to toggle between checked and not checked.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\checkbox.mdx",
"docs": {
"import": {
"source": "checkbox.mdx",
"code": "import { Checkbox } from "@/components/ui/checkbox""
},
"use": [{ "source": "checkbox.mdx", "code": "" }],
"examples": [
{
"source": "checkbox-demo.tsx",
"code": ""use client"\r\n\r\nimport { Checkbox } from "@/components/ui/checkbox"\r\n\r\nexport default function CheckboxDemo() {\r\n return (\r\n <div className="flex items-center space-x-2">\r\n <Checkbox id="terms" />\r\n <label\r\n htmlFor="terms"\r\n className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"\r\n >\r\n Accept terms and conditions\r\n \r\n \r\n )\r\n}"
},
{
"source": "checkbox-disabled.tsx",
"code": "import { Checkbox } from "@/components/ui/checkbox"\r\n\r\nexport default function CheckboxDisabled() {\r\n return (\r\n <div className="flex items-center space-x-2">\r\n <Checkbox id="terms2" disabled />\r\n <label\r\n htmlFor="terms2"\r\n className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"\r\n >\r\n Accept terms and conditions\r\n \r\n \r\n )\r\n}"
},
{
"source": "checkbox-with-text.tsx",
"code": ""use client"\r\n\r\nimport { Checkbox } from "@/components/ui/checkbox"\r\n\r\nexport default function CheckboxWithText() {\r\n return (\r\n <div className="items-top flex space-x-2">\r\n <Checkbox id="terms1" />\r\n <div className="grid gap-1.5 leading-none">\r\n <label\r\n htmlFor="terms1"\r\n className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"\r\n >\r\n Accept terms and conditions\r\n \r\n <p className="text-sm text-muted-foreground">\r\n You agree to our Terms of Service and Privacy Policy.\r\n \r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Collapsible",
"description": "An interactive component which expands/collapses a panel.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\collapsible.mdx",
"docs": {
"import": {
"source": "collapsible.mdx",
"code": "import {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from "@/components/ui/collapsible""
},
"use": [
{
"source": "collapsible.mdx",
"code": "\n Can I use this in my project?\n \n Yes. Free to use for personal and commercial projects. No attribution\n required.\n \n"
}
],
"examples": [
{
"source": "collapsible-demo.tsx",
"code": ""use client"\r\n\r\nimport * as React from "react"\r\nimport { ChevronsUpDown, Plus, X } from "lucide-react"\r\n\r\nimport { Button } from "@/components/ui/button"\r\nimport {\r\n Collapsible,\r\n CollapsibleContent,\r\n CollapsibleTrigger,\r\n} from "@/components/ui/collapsible"\r\n\r\nexport default function CollapsibleDemo() {\r\n const [isOpen, setIsOpen] = React.useState(false)\r\n\r\n return (\r\n <Collapsible\r\n open={isOpen}\r\n onOpenChange={setIsOpen}\r\n className="w-[350px] space-y-2"\r\n >\r\n <div className="flex items-center justify-between space-x-4 px-4">\r\n <h4 className="text-sm font-semibold">\r\n @peduarte starred 3 repositories\r\n \r\n \r\n <Button variant="ghost" size="sm" className="w-9 p-0">\r\n <ChevronsUpDown className="h-4 w-4" />\r\n <span className="sr-only">Toggle\r\n \r\n \r\n \r\n <div className="rounded-md border px-4 py-3 font-mono text-sm">\r\n @radix-ui/primitives\r\n \r\n <CollapsibleContent className="space-y-2">\r\n <div className="rounded-md border px-4 py-3 font-mono text-sm">\r\n @radix-ui/colors\r\n \r\n <div className="rounded-md border px-4 py-3 font-mono text-sm">\r\n @stitches/react\r\n \r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Combobox",
"description": "Autocomplete input and command palette with a list of suggestions.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\combobox.mdx",
"docs": {
"import": {
"source": "combobox.mdx",
"code": ""use client"\n\nimport * as React from "react"\nimport { Check, ChevronsUpDown } from "lucide-react"\n\nimport { cn } from "@/lib/utils"\nimport { Button } from "@/components/ui/button"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n} from "@/components/ui/command"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from "@/components/ui/popover"\n\nconst frameworks = [\n {\n value: "next.js",\n label: "Next.js",\n },\n {\n value: "sveltekit",\n label: "SvelteKit",\n },\n {\n value: "nuxt.js",\n label: "Nuxt.js",\n },\n {\n value: "remix",\n label: "Remix",\n },\n {\n value: "astro",\n label: "Astro",\n },\n]\n\nexport function ComboboxDemo() {\n const [open, setOpen] = React.useState(false)\n const [value, setValue] = React.useState("")\n\n return (\n \n \n <Button\n variant="outline"\n role="combobox"\n aria-expanded={open}\n className="w-[200px] justify-between"\n >\n {value\n ? frameworks.find((framework) => framework.value === value)?.label\n : "Select framework..."}\n <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />\n \n \n <PopoverContent className="w-[200px] p-0">\n \n <CommandInput placeholder="Search framework..." />\n No framework found.\n \n {frameworks.map((framework) => (\n <CommandItem\n key={framework.value}\n onSelect={(currentValue) => {\n setValue(currentValue === value ? "" : currentValue)\n setOpen(false)\n }}\n >\n <Check\n className={cn(\n "mr-2 h-4 w-4",\n value === framework.value ? "opacity-100" : "opacity-0"\n )}\n />\n {framework.label}\n \n ))}\n \n \n \n \n )\n}"
},
"use": [],
"examples": [
{
"source": "combobox-demo.tsx",
"code": ""use client"\r\n\r\nimport * as React from "react"\r\nimport { Check, ChevronsUpDown } from "lucide-react"\r\n\r\nimport { cn } from "@/lib/utils"\r\nimport { Button } from "@/components/ui/button"\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n} from "@/components/ui/command"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from "@/components/ui/popover"\r\n\r\nconst frameworks = [\r\n {\r\n value: "next.js",\r\n label: "Next.js",\r\n },\r\n {\r\n value: "sveltekit",\r\n label: "SvelteKit",\r\n },\r\n {\r\n value: "nuxt.js",\r\n label: "Nuxt.js",\r\n },\r\n {\r\n value: "remix",\r\n label: "Remix",\r\n },\r\n {\r\n value: "astro",\r\n label: "Astro",\r\n },\r\n]\r\n\r\nexport default function ComboboxDemo() {\r\n const [open, setOpen] = React.useState(false)\r\n const [value, setValue] = React.useState("")\r\n\r\n return (\r\n \r\n \r\n <Button\r\n variant="outline"\r\n role="combobox"\r\n aria-expanded={open}\r\n className="w-[200px] justify-between"\r\n >\r\n {value\r\n ? frameworks.find((framework) => framework.value === value)?.label\r\n : "Select framework..."}\r\n <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />\r\n \r\n \r\n <PopoverContent className="w-[200px] p-0">\r\n \r\n <CommandInput placeholder="Search framework..." />\r\n No framework found.\r\n \r\n {frameworks.map((framework) => (\r\n <CommandItem\r\n key={framework.value}\r\n onSelect={(currentValue) => {\r\n setValue(currentValue === value ? "" : currentValue)\r\n setOpen(false)\r\n }}\r\n >\r\n <Check\r\n className={cn(\r\n "mr-2 h-4 w-4",\r\n value === framework.value ? "opacity-100" : "opacity-0"\r\n )}\r\n />\r\n {framework.label}\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n )\r\n}"
},
{
"source": "combobox-dropdown-menu.tsx",
"code": ""use client"\r\n\r\nimport * as React from "react"\r\nimport { Calendar, MoreHorizontal, Tags, Trash, User } from "lucide-react"\r\n\r\nimport { Button } from "@/components/ui/button"\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from "@/components/ui/command"\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuContent,\r\n DropdownMenuGroup,\r\n DropdownMenuItem,\r\n DropdownMenuLabel,\r\n DropdownMenuSeparator,\r\n DropdownMenuShortcut,\r\n DropdownMenuSub,\r\n DropdownMenuSubContent,\r\n DropdownMenuSubTrigger,\r\n DropdownMenuTrigger,\r\n} from "@/components/ui/dropdown-menu"\r\n\r\nconst labels = [\r\n "feature",\r\n "bug",\r\n "enhancement",\r\n "documentation",\r\n "design",\r\n "question",\r\n "maintenance",\r\n]\r\n\r\nexport default function ComboboxDropdownMenu() {\r\n const [label, setLabel] = React.useState("feature")\r\n const [open, setOpen] = React.useState(false)\r\n\r\n return (\r\n <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">\r\n <p className="text-sm font-medium leading-none">\r\n <span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">\r\n {label}\r\n \r\n <span className="text-muted-foreground">Create a new project\r\n \r\n \r\n \r\n <Button variant="ghost" size="sm">\r\n \r\n \r\n \r\n <DropdownMenuContent align="end" className="w-[200px]">\r\n Actions\r\n \r\n \r\n <User className="mr-2 h-4 w-4" />\r\n Assign to...\r\n \r\n \r\n <Calendar className="mr-2 h-4 w-4" />\r\n Set due date...\r\n \r\n \r\n \r\n \r\n <Tags className="mr-2 h-4 w-4" />\r\n Apply label\r\n \r\n <DropdownMenuSubContent className="p-0">\r\n \r\n <CommandInput\r\n placeholder="Filter label..."\r\n autoFocus={true}\r\n />\r\n \r\n No label found.\r\n \r\n {labels.map((label) => (\r\n <CommandItem\r\n key={label}\r\n onSelect={(value) => {\r\n setLabel(value)\r\n setOpen(false)\r\n }}\r\n >\r\n {label}\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n <DropdownMenuItem className="text-red-600">\r\n <Trash className="mr-2 h-4 w-4" />\r\n Delete\r\n ⌘⌫\r\n \r\n \r\n \r\n \r\n \r\n )\r\n}"
},
{
"source": "combobox-popover.tsx",
"code": ""use client"\r\n\r\nimport * as React from "react"\r\nimport {\r\n ArrowUpCircle,\r\n CheckCircle2,\r\n Circle,\r\n HelpCircle,\r\n LucideIcon,\r\n XCircle,\r\n} from "lucide-react"\r\n\r\nimport { cn } from "@/lib/utils"\r\nimport { Button } from "@/components/ui/button"\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from "@/components/ui/command"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from "@/components/ui/popover"\r\n\r\ntype Status = {\r\n value: string\r\n label: string\r\n icon: LucideIcon\r\n}\r\n\r\nconst statuses: Status[] = [\r\n {\r\n value: "backlog",\r\n label: "Backlog",\r\n icon: HelpCircle,\r\n },\r\n {\r\n value: "todo",\r\n label: "Todo",\r\n icon: Circle,\r\n },\r\n {\r\n value: "in progress",\r\n label: "In Progress",\r\n icon: ArrowUpCircle,\r\n },\r\n {\r\n value: "done",\r\n label: "Done",\r\n icon: CheckCircle2,\r\n },\r\n {\r\n value: "canceled",\r\n label: "Canceled",\r\n icon: XCircle,\r\n },\r\n]\r\n\r\nexport default function ComboboxPopover() {\r\n const [open, setOpen] = React.useState(false)\r\n const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\r\n null\r\n )\r\n\r\n return (\r\n <div className="flex items-center space-x-4">\r\n <p className="text-sm text-muted-foreground">Status\r\n \r\n \r\n <Button\r\n variant="outline"\r\n size="sm"\r\n className="w-[150px] justify-start"\r\n >\r\n {selectedStatus ? (\r\n <>\r\n <selectedStatus.icon className="mr-2 h-4 w-4 shrink-0" />\r\n {selectedStatus.label}\r\n </>\r\n ) : (\r\n <>+ Set status</>\r\n )}\r\n \r\n \r\n <PopoverContent className="p-0" side="right" align="start">\r\n \r\n <CommandInput placeholder="Change status..." />\r\n \r\n No results found.\r\n \r\n {statuses.map((status) => (\r\n <CommandItem\r\n key={status.value}\r\n onSelect={(value) => {\r\n setSelectedStatus(\r\n statuses.find((priority) => priority.value === value) ||\r\n null\r\n )\r\n setOpen(false)\r\n }}\r\n >\r\n <status.icon\r\n className={cn(\r\n "mr-2 h-4 w-4",\r\n status.value === selectedStatus?.value\r\n ? "opacity-100"\r\n : "opacity-40"\r\n )}\r\n />\r\n {status.label}\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Command",
"description": "Fast, composable, unstyled command menu for React.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\command.mdx",
"docs": {
"import": {
"source": "command.mdx",
"code": "import {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from "@/components/ui/command""
},
"use": [
{
"source": "command.mdx",
"code": "\n <CommandInput placeholder="Type a command or search..." />\n \n No results found.\n <CommandGroup heading="Suggestions">\n Calendar\n Search Emoji\n Calculator\n \n \n <CommandGroup heading="Settings">\n Profile\n Billing\n Settings\n \n \n"
},
{
"source": "command.mdx",
"code": "export function CommandMenu() {\n const [open, setOpen] = React.useState(false)\n\n React.useEffect(() => {\n const down = (e: KeyboardEvent) => {\n if (e.key === "k" && (e.metaKey || e.ctrlKey)) {\n e.preventDefault()\n setOpen((open) => !open)\n }\n }\n document.addEventListener("keydown", down)\n return () => document.removeEventListener("keydown", down)\n }, [])\n\n return (\n \n <CommandInput placeholder="Type a command or search..." />\n \n No results found.\n <CommandGroup heading="Suggestions">\n Calendar\n Search Emoji\n Calculator\n \n \n \n )\n}"
}
],
"examples": [
{
"source": "command-demo.tsx",
"code": "import {\r\n Calculator,\r\n Calendar,\r\n CreditCard,\r\n Settings,\r\n Smile,\r\n User,\r\n} from "lucide-react"\r\n\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n CommandSeparator,\r\n CommandShortcut,\r\n} from "@/components/ui/command"\r\n\r\nexport default function CommandDemo() {\r\n return (\r\n <Command className="rounded-lg border shadow-md">\r\n <CommandInput placeholder="Type a command or search..." />\r\n \r\n No results found.\r\n <CommandGroup heading="Suggestions">\r\n \r\n <Calendar className="mr-2 h-4 w-4" />\r\n Calendar\r\n \r\n \r\n <Smile className="mr-2 h-4 w-4" />\r\n Search Emoji\r\n \r\n \r\n <Calculator className="mr-2 h-4 w-4" />\r\n Calculator\r\n \r\n \r\n \r\n <CommandGroup heading="Settings">\r\n \r\n <User className="mr-2 h-4 w-4" />\r\n Profile\r\n ⌘P\r\n \r\n \r\n <CreditCard className="mr-2 h-4 w-4" />\r\n Billing\r\n ⌘B\r\n \r\n \r\n <Settings className="mr-2 h-4 w-4" />\r\n Settings\r\n ⌘S\r\n \r\n \r\n \r\n \r\n )\r\n}"
},
{
"source": "command-dialog.tsx",
"code": ""use client"\r\n\r\nimport * as React from "react"\r\nimport {\r\n Calculator,\r\n Calendar,\r\n CreditCard,\r\n Settings,\r\n Smile,\r\n User,\r\n} from "lucide-react"\r\n\r\nimport {\r\n CommandDialog,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n CommandSeparator,\r\n CommandShortcut,\r\n} from "@/components/ui/command"\r\n\r\nexport default function CommandDialogDemo() {\r\n const [open, setOpen] = React.useState(false)\r\n\r\n React.useEffect(() => {\r\n const down = (e: KeyboardEvent) => {\r\n if (e.key === "j" && (e.metaKey || e.ctrlKey)) {\r\n e.preventDefault()\r\n setOpen((open) => !open)\r\n }\r\n }\r\n\r\n document.addEventListener("keydown", down)\r\n return () => document.removeEventListener("keydown", down)\r\n }, [])\r\n\r\n return (\r\n <>\r\n <p className="text-sm text-muted-foreground">\r\n Press{" "}\r\n <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">\r\n <span className="text-xs">⌘J\r\n \r\n \r\n \r\n <CommandInput placeholder="Type a command or search..." />\r\n \r\n No results found.\r\n <CommandGroup heading="Suggestions">\r\n \r\n <Calendar className="mr-2 h-4 w-4" />\r\n Calendar\r\n \r\n \r\n <Smile className="mr-2 h-4 w-4" />\r\n Search Emoji\r\n \r\n \r\n <Calculator className="mr-2 h-4 w-4" />\r\n Calculator\r\n \r\n \r\n \r\n <CommandGroup heading="Settings">\r\n \r\n <User className="mr-2 h-4 w-4" />\r\n Profile\r\n ⌘P\r\n \r\n \r\n <CreditCard className="mr-2 h-4 w-4" />\r\n Billing\r\n ⌘B\r\n \r\n \r\n <Settings className="mr-2 h-4 w-4" />\r\n Settings\r\n ⌘S\r\n \r\n \r\n \r\n \r\n </>\r\n )\r\n}"
}
]
}
},
{
"name": "Context Menu",
"description": "Displays a menu to the user — such as a set of actions or functions — triggered by a button.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\context-menu.mdx",
"docs": {
"import": {
"source": "context-menu.mdx",
"code": "import {\n ContextMenu,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuTrigger,\n} from "@/components/ui/context-menu""
},
"use": [
{
"source": "context-menu.mdx",
"code": "\n Right click\n \n Profile\n Billing\n Team\n Subscription\n \n"
}
],
"examples": [
{
"source": "context-menu-demo.tsx",
"code": "import {\r\n ContextMenu,\r\n ContextMenuCheckboxItem,\r\n ContextMenuContent,\r\n ContextMenuItem,\r\n ContextMenuLabel,\r\n ContextMenuRadioGroup,\r\n ContextMenuRadioItem,\r\n ContextMenuSeparator,\r\n ContextMenuShortcut,\r\n ContextMenuSub,\r\n ContextMenuSubContent,\r\n ContextMenuSubTrigger,\r\n ContextMenuTrigger,\r\n} from "@/components/ui/context-menu"\r\n\r\nexport default function ContextMenuDemo() {\r\n return (\r\n \r\n <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">\r\n Right click here\r\n \r\n <ContextMenuContent className="w-64">\r\n \r\n Back\r\n ⌘[\r\n \r\n \r\n Forward\r\n ⌘]\r\n \r\n \r\n Reload\r\n ⌘R\r\n \r\n \r\n More Tools\r\n <ContextMenuSubContent className="w-48">\r\n \r\n Save Page As...\r\n ⇧⌘S\r\n \r\n Create Shortcut...\r\n Name Window...\r\n \r\n Developer Tools\r\n \r\n \r\n \r\n \r\n Show Bookmarks Bar\r\n ⌘⇧B\r\n \r\n Show Full URLs\r\n \r\n <ContextMenuRadioGroup value="pedro">\r\n People\r\n \r\n <ContextMenuRadioItem value="pedro">\r\n Pedro Duarte\r\n \r\n <ContextMenuRadioItem value="colm">Colm Tuite\r\n \r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Date Picker",
"description": "A date picker component with range and presets.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\date-picker.mdx",
"docs": {
"import": {
"source": "date-picker.mdx",
"code": ""use client"\n\nimport * as React from "react"\nimport { format } from "date-fns"\nimport { Calendar as CalendarIcon } from "lucide-react"\n\nimport { cn } from "@/lib/utils"\nimport { Button } from "@/components/ui/button"\nimport { Calendar } from "@/components/ui/calendar"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from "@/components/ui/popover"\n\nexport function DatePickerDemo() {\n const [date, setDate] = React.useState()\n\n return (\n \n \n <Button\n variant={"outline"}\n className={cn(\n "w-[280px] justify-start text-left font-normal",\n !date && "text-muted-foreground"\n )}\n >\n <CalendarIcon className="mr-2 h-4 w-4" />\n {date ? format(date, "PPP") : Pick a date}\n \n \n <PopoverContent className="w-auto p-0">\n <Calendar\n mode="single"\n selected={date}\n onSelect={setDate}\n initialFocus\n />\n \n \n )\n}"
},
"use": [],
"examples": [
{
"source": "date-picker-demo.tsx",
"code": ""use client"\r\n\r\nimport * as React from "react"\r\nimport { format } from "date-fns"\r\nimport { Calendar as CalendarIcon } from "lucide-react"\r\n\r\nimport { cn } from "@/lib/utils"\r\nimport { Button } from "@/components/ui/button"\r\nimport { Calendar } from "@/components/ui/calendar"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from "@/components/ui/popover"\r\n\r\nexport default function DatePickerDemo() {\r\n const [date, setDate] = React.useState()\r\n\r\n return (\r\n \r\n \r\n <Button\r\n variant={"outline"}\r\n className={cn(\r\n "w-[280px] justify-start text-left font-normal",\r\n !date && "text-muted-foreground"\r\n )}\r\n >\r\n <CalendarIcon className="mr-2 h-4 w-4" />\r\n {date ? format(date, "PPP") : Pick a date}\r\n \r\n \r\n <PopoverContent className="w-auto p-0">\r\n <Calendar\r\n mode="single"\r\n selected={date}\r\n onSelect={setDate}\r\n initialFocus\r\n />\r\n \r\n \r\n )\r\n}"
},
{
"source": "date-picker-with-presets.tsx",
"code": ""use client"\r\n\r\nimport * as React from "react"\r\nimport { addDays, format } from "date-fns"\r\nimport { Calendar as CalendarIcon } from "lucide-react"\r\n\r\nimport { cn } from "@/lib/utils"\r\nimport { Button } from "@/components/ui/button"\r\nimport { Calendar } from "@/components/ui/calendar"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from "@/components/ui/popover"\r\nimport {\r\n Select,\r\n SelectContent,\r\n SelectItem,\r\n SelectTrigger,\r\n SelectValue,\r\n} from "@/components/ui/select"\r\n\r\nexport default function DatePickerWithPresets() {\r\n const [date, setDate] = React.useState()\r\n\r\n return (\r\n \r\n \r\n <Button\r\n variant={"outline"}\r\n className={cn(\r\n "w-[280px] justify-start text-left font-normal",\r\n !date && "text-muted-foreground"\r\n )}\r\n >\r\n <CalendarIcon className="mr-2 h-4 w-4" />\r\n {date ? format(date, "PPP") : Pick a date}\r\n \r\n \r\n <PopoverContent className="flex w-auto flex-col space-y-2 p-2">\r\n <Select\r\n onValueChange={(value) =>\r\n setDate(addDays(new Date(), parseInt(value)))\r\n }\r\n >\r\n \r\n <SelectValue placeholder="Select" />\r\n \r\n <SelectContent position="popper">\r\n <SelectItem value="0">Today\r\n <SelectItem value="1">Tomorrow\r\n <SelectItem value="3">In 3 days\r\n <SelectItem value="7">In a week\r\n \r\n \r\n <div className="rounded-md border">\r\n <Calendar mode="single" selected={date} onSelect={setDate} />\r\n \r\n \r\n \r\n )\r\n}"
},
{
"source": "date-picker-with-range.tsx",
"code": ""use client"\r\n\r\nimport * as React from "react"\r\nimport { addDays, format } from "date-fns"\r\nimport { Calendar as CalendarIcon } from "lucide-react"\r\nimport { DateRange } from "react-day-picker"\r\n\r\nimport { cn } from "@/lib/utils"\r\nimport { Button } from "@/components/ui/button"\r\nimport { Calendar } from "@/components/ui/calendar"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from "@/components/ui/popover"\r\n\r\nexport default function DatePickerWithRange({\r\n className,\r\n}: React.HTMLAttributes) {\r\n const [date, setDate] = React.useState<DateRange | undefined>({\r\n from: new Date(2022, 0, 20),\r\n to: addDays(new Date(2022, 0, 20), 20),\r\n })\r\n\r\n return (\r\n <div className={cn("grid gap-2", className)}>\r\n \r\n \r\n <Button\r\n id="date"\r\n variant={"outline"}\r\n className={cn(\r\n "w-[300px] justify-start text-left font-normal",\r\n !date && "text-muted-foreground"\r\n )}\r\n >\r\n <CalendarIcon className="mr-2 h-4 w-4" />\r\n {date?.from ? (\r\n date.to ? (\r\n <>\r\n {format(date.from, "LLL dd, y")} -{" "}\r\n {format(date.to, "LLL dd, y")}\r\n </>\r\n ) : (\r\n format(date.from, "LLL dd, y")\r\n )\r\n ) : (\r\n Pick a date\r\n )}\r\n \r\n \r\n <PopoverContent className="w-auto p-0" align="start">\r\n <Calendar\r\n initialFocus\r\n mode="range"\r\n defaultMonth={date?.from}\r\n selected={date}\r\n onSelect={setDate}\r\n numberOfMonths={2}\r\n />\r\n \r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Dialog",
"description": "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\dialog.mdx",
"docs": {
"import": {
"source": "dialog.mdx",
"code": "import {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from "@/components/ui/dialog""
},
"use": [
{
"source": "dialog.mdx",
"code": "\n Open\n \n \n Are you sure absolutely sure?\n \n This action cannot be undone. This will permanently delete your account\n and remove your data from our servers.\n \n \n \n"
}
],
"examples": [
{
"source": "dialog-demo.tsx",
"code": "import { Button } from "@/components/ui/button"\r\nimport {\r\n Dialog,\r\n DialogContent,\r\n DialogDescription,\r\n DialogFooter,\r\n DialogHeader,\r\n DialogTitle,\r\n DialogTrigger,\r\n} from "@/components/ui/dialog"\r\nimport { Input } from "@/components/ui/input"\r\nimport { Label } from "@/components/ui/label"\r\n\r\nexport default function DialogDemo() {\r\n return (\r\n \r\n \r\n <Button variant="outline">Edit Profile\r\n \r\n <DialogContent className="sm:max-w-[425px]">\r\n \r\n Edit profile\r\n \r\n Make changes to your profile here. Click save when you're done.\r\n \r\n \r\n <div className="grid gap-4 py-4">\r\n <div className="grid grid-cols-4 items-center gap-4">\r\n <Label htmlFor="name" className="text-right">\r\n Name\r\n \r\n <Input id="name" value="Pedro Duarte" className="col-span-3" />\r\n \r\n <div className="grid grid-cols-4 items-center gap-4">\r\n <Label htmlFor="username" className="text-right">\r\n Username\r\n \r\n <Input id="username" value="@peduarte" className="col-span-3" />\r\n \r\n \r\n \r\n <Button type="submit">Save changes\r\n \r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Dropdown Menu",
"description": "Displays a menu to the user — such as a set of actions or functions — triggered by a button.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\dropdown-menu.mdx",
"docs": {
"import": {
"source": "dropdown-menu.mdx",
"code": "import {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from "@/components/ui/dropdown-menu""
},
"use": [
{
"source": "dropdown-menu.mdx",
"code": "\n Open\n \n My Account\n \n Profile\n Billing\n Team\n Subscription\n \n"
}
],
"examples": [
{
"source": "dropdown-menu-checkboxes.tsx",
"code": ""use client"\r\n\r\nimport * as React from "react"\r\nimport { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"\r\n\r\nimport { Button } from "@/components/ui/button"\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuCheckboxItem,\r\n DropdownMenuContent,\r\n DropdownMenuLabel,\r\n DropdownMenuSeparator,\r\n DropdownMenuTrigger,\r\n} from "@/components/ui/dropdown-menu"\r\n\r\ntype Checked = DropdownMenuCheckboxItemProps["checked"]\r\n\r\nexport default function DropdownMenuCheckboxes() {\r\n const [showStatusBar, setShowStatusBar] = React.useState(true)\r\n const [showActivityBar, setShowActivityBar] = React.useState(false)\r\n const [showPanel, setShowPanel] = React.useState(false)\r\n\r\n return (\r\n \r\n \r\n <Button variant="outline">Open\r\n \r\n <DropdownMenuContent className="w-56">\r\n Appearance\r\n \r\n <DropdownMenuCheckboxItem\r\n checked={showStatusBar}\r\n onCheckedChange={setShowStatusBar}\r\n >\r\n Status Bar\r\n \r\n <DropdownMenuCheckboxItem\r\n checked={showActivityBar}\r\n onCheckedChange={setShowActivityBar}\r\n disabled\r\n >\r\n Activity Bar\r\n \r\n <DropdownMenuCheckboxItem\r\n checked={showPanel}\r\n onCheckedChange={setShowPanel}\r\n >\r\n Panel\r\n \r\n \r\n \r\n )\r\n}"
},
{
"source": "dropdown-menu-demo.tsx",
"code": "import {\r\n Cloud,\r\n CreditCard,\r\n Github,\r\n Keyboard,\r\n LifeBuoy,\r\n LogOut,\r\n Mail,\r\n MessageSquare,\r\n Plus,\r\n PlusCircle,\r\n Settings,\r\n User,\r\n UserPlus,\r\n Users,\r\n} from "lucide-react"\r\n\r\nimport { Button } from "@/components/ui/button"\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuContent,\r\n DropdownMenuGroup,\r\n DropdownMenuItem,\r\n DropdownMenuLabel,\r\n DropdownMenuPortal,\r\n DropdownMenuSeparator,\r\n DropdownMenuShortcut,\r\n DropdownMenuSub,\r\n DropdownMenuSubContent,\r\n DropdownMenuSubTrigger,\r\n DropdownMenuTrigger,\r\n} from "@/components/ui/dropdown-menu"\r\n\r\nexport default function DropdownMenuDemo() {\r\n return (\r\n \r\n \r\n <Button variant="outline">Open\r\n \r\n <DropdownMenuContent className="w-56">\r\n My Account\r\n \r\n \r\n \r\n <User className="mr-2 h-4 w-4" />\r\n Profile\r\n ⇧⌘P\r\n \r\n \r\n <CreditCard className="mr-2 h-4 w-4" />\r\n Billing\r\n ⌘B\r\n \r\n \r\n <Settings className="mr-2 h-4 w-4" />\r\n Settings\r\n ⌘S\r\n \r\n \r\n <Keyboard className="mr-2 h-4 w-4" />\r\n Keyboard shortcuts\r\n ⌘K\r\n \r\n \r\n \r\n \r\n \r\n <Users className="mr-2 h-4 w-4" />\r\n Team\r\n \r\n \r\n \r\n <UserPlus className="mr-2 h-4 w-4" />\r\n Invite users\r\n \r\n \r\n \r\n \r\n <Mail className="mr-2 h-4 w-4" />\r\n Email\r\n \r\n \r\n <MessageSquare className="mr-2 h-4 w-4" />\r\n Message\r\n \r\n \r\n \r\n <PlusCircle className="mr-2 h-4 w-4" />\r\n More...\r\n \r\n \r\n \r\n \r\n \r\n <Plus className="mr-2 h-4 w-4" />\r\n New Team\r\n ⌘+T\r\n \r\n \r\n \r\n \r\n <Github className="mr-2 h-4 w-4" />\r\n GitHub\r\n \r\n \r\n <LifeBuoy className="mr-2 h-4 w-4" />\r\n Support\r\n \r\n \r\n <Cloud className="mr-2 h-4 w-4" />\r\n API\r\n \r\n \r\n \r\n <LogOut className="mr-2 h-4 w-4" />\r\n Log out\r\n ⇧⌘Q\r\n \r\n \r\n \r\n )\r\n}"
},
{
"source": "dropdown-menu-radio-group.tsx",
"code": ""use client"\r\n\r\nimport * as React from "react"\r\nimport { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"\r\n\r\nimport { Button } from "@/components/ui/button"\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuCheckboxItem,\r\n DropdownMenuContent,\r\n DropdownMenuLabel,\r\n DropdownMenuRadioGroup,\r\n DropdownMenuRadioItem,\r\n DropdownMenuSeparator,\r\n DropdownMenuTrigger,\r\n} from "@/components/ui/dropdown-menu"\r\n\r\nexport default function DropdownMenuRadioGroupDemo() {\r\n const [position, setPosition] = React.useState("bottom")\r\n\r\n return (\r\n \r\n \r\n <Button variant="outline">Open\r\n \r\n <DropdownMenuContent className="w-56">\r\n Panel Position\r\n \r\n \r\n <DropdownMenuRadioItem value="top">Top\r\n <DropdownMenuRadioItem value="bottom">Bottom\r\n <DropdownMenuRadioItem value="right">Right\r\n \r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Hover Card",
"description": "For sighted users to preview content available behind a link.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\hover-card.mdx",
"docs": {
"import": {
"source": "hover-card.mdx",
"code": "import {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from "@/components/ui/hover-card""
},
"use": [
{
"source": "hover-card.mdx",
"code": "\n Hover\n \n The React Framework – created and maintained by @vercel.\n \n"
}
],
"examples": [
{
"source": "hover-card-demo.tsx",
"code": "import { CalendarDays } from "lucide-react"\r\n\r\nimport {\r\n Avatar,\r\n AvatarFallback,\r\n AvatarImage,\r\n} from "@/components/ui/avatar"\r\nimport { Button } from "@/components/ui/button"\r\nimport {\r\n HoverCard,\r\n HoverCardContent,\r\n HoverCardTrigger,\r\n} from "@/components/ui/hover-card"\r\n\r\nexport default function HoverCardDemo() {\r\n return (\r\n \r\n \r\n <Button variant="link">@nextjs\r\n \r\n <HoverCardContent className="w-80">\r\n <div className="flex justify-between space-x-4">\r\n \r\n <AvatarImage src="https://github.com/vercel.png" />\r\n VC\r\n \r\n <div className="space-y-1">\r\n <h4 className="text-sm font-semibold">@nextjs\r\n <p className="text-sm">\r\n The React Framework – created and maintained by @vercel.\r\n \r\n <div className="flex items-center pt-2">\r\n <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}\r\n <span className="text-xs text-muted-foreground">\r\n Joined December 2021\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Input",
"description": "Displays a form input field or a component that looks like an input field.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\input.mdx",
"docs": {
"import": {
"source": "input.mdx",
"code": "import { Input } from "@/components/ui/input""
},
"use": [{ "source": "input.mdx", "code": "" }],
"examples": [
{
"source": "input-demo.tsx",
"code": "import { Input } from "@/components/ui/input"\r\n\r\nexport default function InputDemo() {\r\n return <Input type="email" placeholder="Email" />\r\n}"
},
{
"source": "input-disabled.tsx",
"code": "import { Input } from "@/components/ui/input"\r\n\r\nexport default function InputDisabled() {\r\n return <Input disabled type="email" placeholder="Email" />\r\n}"
},
{
"source": "input-file.tsx",
"code": "import { Input } from "@/components/ui/input"\r\nimport { Label } from "@/components/ui/label"\r\n\r\nexport default function InputFile() {\r\n return (\r\n <div className="grid w-full max-w-sm items-center gap-1.5">\r\n <Label htmlFor="picture">Picture\r\n <Input id="picture" type="file" />\r\n \r\n )\r\n}"
},
{
"source": "input-with-button.tsx",
"code": "import { Button } from "@/components/ui/button"\r\nimport { Input } from "@/components/ui/input"\r\n\r\nexport default function InputWithButton() {\r\n return (\r\n <div className="flex w-full max-w-sm items-center space-x-2">\r\n <Input type="email" placeholder="Email" />\r\n <Button type="submit">Subscribe\r\n \r\n )\r\n}"
},
{
"source": "input-with-label.tsx",
"code": "import { Input } from "@/components/ui/input"\r\nimport { Label } from "@/components/ui/label"\r\n\r\nexport default function InputWithLabel() {\r\n return (\r\n <div className="grid w-full max-w-sm items-center gap-1.5">\r\n <Label htmlFor="email">Email\r\n <Input type="email" id="email" placeholder="Email" />\r\n \r\n )\r\n}"
},
{
"source": "input-with-text.tsx",
"code": "import { Input } from "@/components/ui/input"\r\nimport { Label } from "@/components/ui/label"\r\n\r\nexport default function InputWithText() {\r\n return (\r\n <div className="grid w-full max-w-sm items-center gap-1.5">\r\n <Label htmlFor="email-2">Email\r\n <Input type="email" id="email-2" placeholder="Email" />\r\n <p className="text-sm text-muted-foreground">Enter your email address.\r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Label",
"description": "Renders an accessible label associated with controls.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\label.mdx",
"docs": {
"import": {
"source": "label.mdx",
"code": "import { Label } from "@/components/ui/label""
},
"use": [
{
"source": "label.mdx",
"code": "<Label htmlFor="email">Your email address"
}
],
"examples": [
{
"source": "label-demo.tsx",
"code": "import { Checkbox } from "@/components/ui/checkbox"\r\nimport { Label } from "@/components/ui/label"\r\n\r\nexport default function LabelDemo() {\r\n return (\r\n 
\r\n <div className="flex items-center space-x-2">\r\n <Checkbox id="terms" />\r\n <Label htmlFor="terms">Accept terms and conditions\r\n
\r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Menubar",
"description": "A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\menubar.mdx",
"docs": {
"import": {
"source": "menubar.mdx",
"code": "import {\n Menubar,\n MenubarContent,\n MenubarItem,\n MenubarMenu,\n MenubarSeparator,\n MenubarShortcut,\n MenubarTrigger,\n} from "@/components/ui/menubar""
},
"use": [
{
"source": "menubar.mdx",
"code": "\n \n File\n \n \n New Tab ⌘T\n \n New Window\n \n Share\n \n Print\n \n \n"
}
],
"examples": [
{
"source": "menubar-demo.tsx",
"code": "import {\r\n Menubar,\r\n MenubarCheckboxItem,\r\n MenubarContent,\r\n MenubarItem,\r\n MenubarMenu,\r\n MenubarRadioGroup,\r\n MenubarRadioItem,\r\n MenubarSeparator,\r\n MenubarShortcut,\r\n MenubarSub,\r\n MenubarSubContent,\r\n MenubarSubTrigger,\r\n MenubarTrigger,\r\n} from "@/components/ui/menubar"\r\n\r\nexport default function MenubarDemo() {\r\n return (\r\n \r\n \r\n File\r\n \r\n \r\n New Tab ⌘T\r\n \r\n \r\n New Window ⌘N\r\n \r\n New Incognito Window\r\n \r\n \r\n Share\r\n \r\n Email link\r\n Messages\r\n Notes\r\n \r\n \r\n \r\n \r\n Print... ⌘P\r\n \r\n \r\n \r\n \r\n Edit\r\n \r\n \r\n Undo ⌘Z\r\n \r\n \r\n Redo ⇧⌘Z\r\n \r\n \r\n \r\n Find\r\n \r\n Search the web\r\n \r\n Find...\r\n Find Next\r\n Find Previous\r\n \r\n \r\n \r\n Cut\r\n Copy\r\n Paste\r\n \r\n \r\n \r\n View\r\n \r\n Always Show Bookmarks Bar\r\n \r\n Always Show Full URLs\r\n \r\n \r\n \r\n Reload ⌘R\r\n \r\n \r\n Force Reload ⇧⌘R\r\n \r\n \r\n Toggle Fullscreen\r\n \r\n Hide Sidebar\r\n \r\n \r\n \r\n Profiles\r\n \r\n <MenubarRadioGroup value="benoit">\r\n <MenubarRadioItem value="andy">Andy\r\n <MenubarRadioItem value="benoit">Benoit\r\n <MenubarRadioItem value="Luis">Luis\r\n \r\n \r\n Edit...\r\n \r\n Add Profile...\r\n \r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Navigation Menu",
"description": "A collection of links for navigating websites.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\navigation-menu.mdx",
"docs": {
"import": {
"source": "navigation-menu.mdx",
"code": "import {\n NavigationMenu,\n NavigationMenuContent,\n NavigationMenuIndicator,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n NavigationMenuViewport,\n} from "@/components/ui/navigation-menu""
},
"use": [
{
"source": "navigation-menu.mdx",
"code": "\n \n \n Item One\n \n Link\n \n \n \n"
},
{
"source": "navigation-menu.mdx",
"code": "import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu""
}
],
"examples": []
}
},
{
"name": "Popover",
"description": "Displays rich content in a portal, triggered by a button.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\popover.mdx",
"docs": {
"import": {
"source": "popover.mdx",
"code": "import {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from "@/components/ui/popover""
},
"use": [
{
"source": "popover.mdx",
"code": "\n Open\n Place content for the popover here.\n"
}
],
"examples": [
{
"source": "popover-demo.tsx",
"code": "import { Button } from "@/components/ui/button"\r\nimport { Input } from "@/components/ui/input"\r\nimport { Label } from "@/components/ui/label"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from "@/components/ui/popover"\r\n\r\nexport default function PopoverDemo() {\r\n return (\r\n \r\n \r\n <Button variant="outline">Open popover\r\n \r\n <PopoverContent className="w-80">\r\n <div className="grid gap-4">\r\n <div className="space-y-2">\r\n <h4 className="font-medium leading-none">Dimensions\r\n <p className="text-sm text-muted-foreground">\r\n Set the dimensions for the layer.\r\n \r\n \r\n <div className="grid gap-2">\r\n <div className="grid grid-cols-3 items-center gap-4">\r\n <Label htmlFor="width">Width\r\n <Input\r\n id="width"\r\n defaultValue="100%"\r\n className="col-span-2 h-8"\r\n />\r\n \r\n <div className="grid grid-cols-3 items-center gap-4">\r\n <Label htmlFor="maxWidth">Max. width\r\n <Input\r\n id="maxWidth"\r\n defaultValue="300px"\r\n className="col-span-2 h-8"\r\n />\r\n \r\n <div className="grid grid-cols-3 items-center gap-4">\r\n <Label htmlFor="height">Height\r\n <Input\r\n id="height"\r\n defaultValue="25px"\r\n className="col-span-2 h-8"\r\n />\r\n \r\n <div className="grid grid-cols-3 items-center gap-4">\r\n <Label htmlFor="maxHeight">Max. height\r\n <Input\r\n id="maxHeight"\r\n defaultValue="none"\r\n className="col-span-2 h-8"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Progress",
"description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\progress.mdx",
"docs": {
"import": {
"source": "progress.mdx",
"code": "import { Progress } from "@/components/ui/progress""
},
"use": [{ "source": "progress.mdx", "code": "" }],
"examples": [
{
"source": "progress-demo.tsx",
"code": ""use client"\r\n\r\nimport * as React from "react"\r\n\r\nimport { Progress } from "@/components/ui/progress"\r\n\r\nexport default function ProgressDemo() {\r\n const [progress, setProgress] = React.useState(13)\r\n\r\n React.useEffect(() => {\r\n const timer = setTimeout(() => setProgress(66), 500)\r\n return () => clearTimeout(timer)\r\n }, [])\r\n\r\n return <Progress value={progress} className="w-[60%]" />\r\n}"
}
]
}
},
{
"name": "Radio Group",
"description": "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\radio-group.mdx",
"docs": {
"import": {
"source": "radio-group.mdx",
"code": "import { Label } from "@/components/ui/label"\nimport { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group""
},
"use": [
{
"source": "radio-group.mdx",
"code": "<RadioGroup defaultValue="option-one">\n <div className="flex items-center space-x-2">\n <RadioGroupItem value="option-one" id="option-one" />\n <Label htmlFor="option-one">Option One\n \n <div className="flex items-center space-x-2">\n <RadioGroupItem value="option-two" id="option-two" />\n <Label htmlFor="option-two">Option Two\n \n"
}
],
"examples": [
{
"source": "radio-group-demo.tsx",
"code": "import { Label } from "@/components/ui/label"\r\nimport { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"\r\n\r\nexport default function RadioGroupDemo() {\r\n return (\r\n <RadioGroup defaultValue="comfortable">\r\n <div className="flex items-center space-x-2">\r\n <RadioGroupItem value="default" id="r1" />\r\n <Label htmlFor="r1">Default\r\n \r\n <div className="flex items-center space-x-2">\r\n <RadioGroupItem value="comfortable" id="r2" />\r\n <Label htmlFor="r2">Comfortable\r\n \r\n <div className="flex items-center space-x-2">\r\n <RadioGroupItem value="compact" id="r3" />\r\n <Label htmlFor="r3">Compact\r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Scroll Area",
"description": "Augments native scroll functionality for custom, cross-browser styling.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\scroll-area.mdx",
"docs": {
"import": {
"source": "scroll-area.mdx",
"code": "import { ScrollArea } from "@/components/ui/scroll-area""
},
"use": [
{
"source": "scroll-area.mdx",
"code": "<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">\n Jokester began sneaking into the castle in the middle of the night and leaving\n jokes all over the place: under the king's pillow, in his soup, even in the\n royal toilet. The king was furious, but he couldn't seem to stop Jokester. And\n then, one day, the people of the kingdom discovered that the jokes left by\n Jokester were so funny that they couldn't help but laugh. And once they\n started laughing, they couldn't stop.\n"
}
],
"examples": [
{
"source": "scroll-area-demo.tsx",
"code": "import * as React from "react"\r\n\r\nimport { ScrollArea } from "@/components/ui/scroll-area"\r\nimport { Separator } from "@/components/ui/separator"\r\n\r\nconst tags = Array.from({ length: 50 }).map(\r\n (_, i, a) => v1.2.0-beta.${a.length - i}\r\n)\r\n\r\nexport default function ScrollAreaDemo() {\r\n return (\r\n <ScrollArea className="h-72 w-48 rounded-md border">\r\n <div className="p-4">\r\n <h4 className="mb-4 text-sm font-medium leading-none">Tags\r\n {tags.map((tag) => (\r\n <>\r\n <div key={tag} className="text-sm">\r\n {tag}\r\n \r\n <Separator className="my-2" />\r\n </>\r\n ))}\r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Select",
"description": "Displays a list of options for the user to pick from—triggered by a button.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\select.mdx",
"docs": {
"import": {
"source": "select.mdx",
"code": "import {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from "@/components/ui/select""
},
"use": [
{
"source": "select.mdx",
"code": "\n <SelectTrigger className="w-[180px]">\n <SelectValue placeholder="Theme" />\n \n \n <SelectItem value="light">Light\n <SelectItem value="dark">Dark\n <SelectItem value="system">System\n \n"
}
],
"examples": [
{
"source": "select-demo.tsx",
"code": "import * as React from "react"\r\n\r\nimport {\r\n Select,\r\n SelectContent,\r\n SelectGroup,\r\n SelectItem,\r\n SelectLabel,\r\n SelectTrigger,\r\n SelectValue,\r\n} from "@/components/ui/select"\r\n\r\nexport default function SelectDemo() {\r\n return (\r\n \r\n <SelectTrigger className="w-[180px]">\r\n <SelectValue placeholder="Select a fruit" />\r\n \r\n \r\n \r\n Fruits\r\n <SelectItem value="apple">Apple\r\n <SelectItem value="banana">Banana\r\n <SelectItem value="blueberry">Blueberry\r\n <SelectItem value="grapes">Grapes\r\n <SelectItem value="pineapple">Pineapple\r\n \r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Separator",
"description": "Visually or semantically separates content.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\separator.mdx",
"docs": {
"import": {
"source": "separator.mdx",
"code": "import { Separator } from "@/components/ui/separator""
},
"use": [{ "source": "separator.mdx", "code": "" }],
"examples": [
{
"source": "separator-demo.tsx",
"code": "import { Separator } from "@/components/ui/separator"\r\n\r\nexport default function SeparatorDemo() {\r\n return (\r\n \r\n <div className="space-y-1">\r\n <h4 className="text-sm font-medium leading-none">Radix Primitives\r\n <p className="text-sm text-muted-foreground">\r\n An open-source UI component library.\r\n \r\n
\r\n <Separator className="my-4" />\r\n <div className="flex h-5 items-center space-x-4 text-sm">\r\n Blog
\r\n <Separator orientation="vertical" />\r\n Docs
\r\n <Separator orientation="vertical" />\r\n Source
\r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Sheet",
"description": "Extends the Dialog component to display content that complements the main content of the screen.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\sheet.mdx",
"docs": {
"import": {
"source": "sheet.mdx",
"code": "import {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from "@/components/ui/sheet""
},
"use": [
{
"source": "sheet.mdx",
"code": "\n Open\n \n \n Are you sure absolutely sure?\n \n This action cannot be undone. This will permanently delete your account\n and remove your data from our servers.\n \n \n \n"
}
],
"examples": [
{
"source": "sheet-demo.tsx",
"code": "import { Button } from "@/components/ui/button"\r\nimport { Input } from "@/components/ui/input"\r\nimport { Label } from "@/components/ui/label"\r\nimport {\r\n Sheet,\r\n SheetClose,\r\n SheetContent,\r\n SheetDescription,\r\n SheetFooter,\r\n SheetHeader,\r\n SheetTitle,\r\n SheetTrigger,\r\n} from "@/components/ui/sheet"\r\n\r\nexport default function SheetDemo() {\r\n return (\r\n \r\n \r\n <Button variant="outline">Open\r\n \r\n \r\n \r\n Edit profile\r\n \r\n Make changes to your profile here. Click save when you're done.\r\n \r\n \r\n <div className="grid gap-4 py-4">\r\n <div className="grid grid-cols-4 items-center gap-4">\r\n <Label htmlFor="name" className="text-right">\r\n Name\r\n \r\n <Input id="name" value="Pedro Duarte" className="col-span-3" />\r\n \r\n <div className="grid grid-cols-4 items-center gap-4">\r\n <Label htmlFor="username" className="text-right">\r\n Username\r\n \r\n <Input id="username" value="@peduarte" className="col-span-3" />\r\n \r\n \r\n \r\n \r\n <Button type="submit">Save changes\r\n \r\n \r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Skeleton",
"description": "Use to show a placeholder while content is loading.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\skeleton.mdx",
"docs": {
"import": {
"source": "skeleton.mdx",
"code": "import { Skeleton } from "@/components/ui/skeleton""
},
"use": [
{
"source": "skeleton.mdx",
"code": "<Skeleton className="w-[100px] h-[20px] rounded-full" />"
}
],
"examples": [
{
"source": "skeleton-demo.tsx",
"code": "import { Skeleton } from "@/components/ui/skeleton"\r\n\r\nexport default function SkeletonDemo() {\r\n return (\r\n <div className="flex items-center space-x-4">\r\n <Skeleton className="h-12 w-12 rounded-full" />\r\n <div className="space-y-2">\r\n <Skeleton className="h-4 w-[250px]" />\r\n <Skeleton className="h-4 w-[200px]" />\r\n \r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Slider",
"description": "An input where the user selects a value from within a given range.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\slider.mdx",
"docs": {
"import": {
"source": "slider.mdx",
"code": "import { Slider } from "@/components/ui/slider""
},
"use": [
{
"source": "slider.mdx",
"code": ""
}
],
"examples": [
{
"source": "slider-demo.tsx",
"code": "import { cn } from "@/lib/utils"\r\nimport { Slider } from "@/components/ui/slider"\r\n\r\ntype SliderProps = React.ComponentProps\r\n\r\nexport default function SliderDemo({ className, ...props }: SliderProps) {\r\n return (\r\n <Slider\r\n defaultValue={[50]}\r\n max={100}\r\n step={1}\r\n className={cn("w-[60%]", className)}\r\n {...props}\r\n />\r\n )\r\n}"
}
]
}
},
{
"name": "Switch",
"description": "A control that allows the user to toggle between checked and not checked.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\switch.mdx",
"docs": {
"import": {
"source": "switch.mdx",
"code": "import { Switch } from "@/components/ui/switch""
},
"use": [{ "source": "switch.mdx", "code": "" }],
"examples": [
{
"source": "switch-demo.tsx",
"code": "import { Label } from "@/components/ui/label"\r\nimport { Switch } from "@/components/ui/switch"\r\n\r\nexport default function SwitchDemo() {\r\n return (\r\n <div className="flex items-center space-x-2">\r\n <Switch id="airplane-mode" />\r\n <Label htmlFor="airplane-mode">Airplane Mode\r\n \r\n )\r\n}"
}
]
}
},
{
"name": "Table",
"description": "A responsive table component.",
"docs_path": "build\gits\shadcn-ui$ui-openv0remix\docs\table.mdx",
"docs": {
"import": {
"source": "table.mdx",
"code": "import {\n Table,\n TableBody,\n TableCaption,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from "@/components/ui/table""
},
"use": [
{
"source": "table.mdx",
"code": "\n A list of your recent invoices.\n \n \n <TableHead className="w-[100px]">Invoice\n Status\n Method\n <TableHead className="text-right">Amount\n \n \n \n \n <TableCell className="font-medium">INV001\n Paid\n Credit Card\n <TableCell className="text-right">$250.00\n \n \nAdd to library
\n \n \n" } ], "examples": [ { "source": "tooltip-demo.tsx", "code": "import { Button } from "@/components/ui/button"\r\nimport {\r\n Tooltip,\r\n TooltipContent,\r\n TooltipProvider,\r\n TooltipTrigger,\r\n} from "@/components/ui/tooltip"\r\n\r\nexport default function TooltipDemo() {\r\n return (\r\n \r\n \r\n \r\n <Button variant="outline">Hover\r\n \r\n \r\nAdd to library
\r\n \r\n \r\n \r\n )\r\n}" } ] } } ]