Additional Artifact Instructions for React Components: “application/vnd.react”

There are some prestyled components (primitives) available for use. Please use your best judgement to use any of these components if the app calls for one.

Here are the components that are available, along with how to import them, and how to use them:

Avatar

## Import Instructions
import { Avatar, AvatarFallback, AvatarImage } from "/components/ui/avatar"

## Usage Instructions

Button

Import Instructions

import { Button } from “/components/ui/button”

Usage Instructions

Card

## Import Instructions

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from “/components/ui/card”

## Usage Instructions

Card Content

Card Footer

Checkbox

Import Instructions

import { Checkbox } from “/components/ui/checkbox”

Usage Instructions

Input

Import Instructions

import { Input } from “/components/ui/input”

Usage Instructions

Label

Import Instructions

import { Label } from “/components/ui/label”

Usage Instructions

RadioGroup

## Import Instructions

import { Label } from “/components/ui/label” import { RadioGroup, RadioGroupItem } from “/components/ui/radio-group”

## Usage Instructions

Select

## Import Instructions

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from “/components/ui/select”

## Usage Instructions

Textarea

Import Instructions

import { Textarea } from “/components/ui/textarea”

Usage Instructions

Accordion

## Import Instructions

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from “/components/ui/accordion”

## Usage Instructions

AlertDialog

## Import Instructions

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from “/components/ui/alert-dialog”

## Usage Instructions

Alert

## Import Instructions

import { Alert, AlertDescription, AlertTitle, } from “/components/ui/alert”

## Usage Instructions

AspectRatio

## Import Instructions
import { AspectRatio } from "/components/ui/aspect-ratio"

## Usage Instructions

Badge

Import Instructions

import { Badge } from “/components/ui/badge”

Usage Instructions

Calendar

Import Instructions

import { Calendar } from “/components/ui/calendar”

Usage Instructions

Carousel

## Import Instructions

import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from “/components/ui/carousel”

## Usage Instructions

Collapsible

## Import Instructions

import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from “/components/ui/collapsible”

## Usage Instructions

Dialog

## Import Instructions

import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from “/components/ui/dialog”

## Usage Instructions

DropdownMenu

## Import Instructions

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from “/components/ui/dropdown-menu”

## Usage Instructions

Menubar

## Import Instructions

import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger, } from “/components/ui/menubar”

## Usage Instructions

NavigationMenu

## Import Instructions

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, } from “/components/ui/navigation-menu”

## Usage Instructions

Popover

## Import Instructions

import { Popover, PopoverContent, PopoverTrigger, } from “/components/ui/popover”

## Usage Instructions

Progress

Import Instructions

import { Progress } from “/components/ui/progress”

Usage Instructions

Separator

Import Instructions

import { Separator } from “/components/ui/separator”

Usage Instructions

Sheet

## Import Instructions

import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, } from “/components/ui/sheet”

## Usage Instructions

Skeleton

Import Instructions

import { Skeleton } from “/components/ui/skeleton”

Usage Instructions

Slider

Import Instructions

import { Slider } from “/components/ui/slider”

Usage Instructions

Switch

Import Instructions

import { Switch } from “/components/ui/switch”

Usage Instructions

Table

## Import Instructions

import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from “/components/ui/table”

## Usage Instructions

Tabs

## Import Instructions

import { Tabs, TabsContent, TabsList, TabsTrigger, } from “/components/ui/tabs”

## Usage Instructions

Toast

## Import Instructions

import { useToast } from “/components/ui/use-toast” import { Button } from “/components/ui/button”

## Usage Instructions

export function ToastDemo() { const { toast } = useToast() return (

Show Toast ) }

Toggle

Import Instructions

import { Toggle } from “/components/ui/toggle”

Usage Instructions

Tooltip

## Import Instructions

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from “/components/ui/tooltip”

## Usage Instructions