Hey Thanks!!
As soon as I can get my project running on Netlify I’ll link you over to it
It seems to be working in Dev ok - I used the manual process for the first page (built at v0.dev 
). a tool for doctors allowing them to select a pdf form to use when interviewing a patient | A v0.dev template - v0
I had used manual import and then asked v0 to fix problems - final version is running as generated
after I added the packages it works ok so far
Here are the components
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "src/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants }
import * as React from "react"
import { cn } from "src/lib/utils"
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-xl border bg-card text-card-foreground shadow",
className
)}
{...props}
/>
))
Card.displayName = "Card"
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn("font-semibold leading-none tracking-tight", className)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
import * as React from "react"
import {
CaretSortIcon,
CheckIcon,
ChevronDownIcon,
ChevronUpIcon,
} from "@radix-ui/react-icons"
import * as SelectPrimitive from "@radix-ui/react-select"
import { cn } from "src/lib/utils"
const Select = SelectPrimitive.Root
const SelectGroup = SelectPrimitive.Group
const SelectValue = SelectPrimitive.Value
const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<CaretSortIcon className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
const SelectScrollUpButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronUpIcon />
</SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
const SelectScrollDownButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronDownIcon />
</SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName
const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
)}
position={position}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName
const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
{...props}
/>
))
SelectLabel.displayName = SelectPrimitive.Label.displayName
const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
>
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<CheckIcon className="h-4 w-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName
const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
export {
Select,
SelectGroup,
SelectValue,
SelectTrigger,
SelectContent,
SelectLabel,
SelectItem,
SelectSeparator,
SelectScrollUpButton,
SelectScrollDownButton,
}
and the page
import { Link, routes } from '@redwoodjs/router'
import { Metadata } from '@redwoodjs/web'
/**
* v0 by Vercel.
* @see https://v0.dev/t/7GJwuQ021mN
*/
import { Button } from 'src/components/Button';
import { CardTitle, CardDescription, CardHeader, CardContent, Card, CardFooter } from 'src/components/Card';
import { SelectValue, SelectTrigger, SelectItem, SelectContent, Select } from 'src/components/Select';
const SelectForInterviewPage = () => {
return (
<div className="w-full h-screen bg-gray-100 dark:bg-gray-900 z-20">
<header className="container mx-auto px-4 md:px-6 lg:px-8 py-10 flex items-center justify-between z-20">
<h1 className="text-4xl font-bold text-gray-800 dark:text-gray-200 z-20">Product Title</h1>
<Button className="bg-white dark:bg-gray-800 rounded-full p-2 z-20">
<img alt="User Icon" className="w-8 h-8 z-20" src="/placeholder.svg" />
</Button>
</header>
<div className="container mx-auto px-4 md:px-6 lg:px-8 py-10 z-20">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 z-20">
<div className="md:col-span-1 flex flex-col z-20">
<Card className="h-1/2 bg-white dark:bg-gray-800 z-20">
<CardHeader className="z-20">
<CardTitle className="z-20">Select a Category</CardTitle>
<CardDescription className="z-20">Choose a category to narrow down the form selection.</CardDescription>
</CardHeader>
<CardContent className="z-20">
<Select className="z-20">
<SelectTrigger className="w-full z-20">
<SelectValue className="z-20" placeholder="Select a category" />
</SelectTrigger>
<SelectContent className="bg-white dark:bg-gray-800">
<SelectItem value="category1">Intake</SelectItem>
<SelectItem value="category2">Medical History</SelectItem>
<SelectItem value="category3">Consent</SelectItem>
<SelectItem value="category4">Assessment</SelectItem>
</SelectContent>
</Select>
</CardContent>
</Card>
<Card className="h-1/2 mt-6 bg-white dark:bg-gray-800 z-20">
<CardHeader className="z-20">
<CardTitle className="z-20">Select a Form</CardTitle>
<CardDescription className="z-20">
Choose a form to use during the patient interview process.
</CardDescription>
</CardHeader>
<CardContent className="z-20">
<Select className="z-20">
<SelectTrigger className="w-full z-20">
<SelectValue className="z-20" placeholder="Select a form" />
</SelectTrigger>
<SelectContent className="bg-white dark:bg-gray-800">
<SelectItem value="form1">Patient Intake Form</SelectItem>
<SelectItem value="form2">Medical History Form</SelectItem>
<SelectItem value="form3">Consent Form</SelectItem>
<SelectItem value="form4">Health Assessment Form</SelectItem>
</SelectContent>
</Select>
</CardContent>
</Card>
</div>
<div className="md:col-span-2 z-20">
<Card className="h-full flex flex-col bg-white dark:bg-gray-800 z-20">
<CardHeader className="z-20">
<CardTitle className="z-20">Form Preview</CardTitle>
<CardDescription className="z-20">
Preview the selected form before using it during the patient interview.
</CardDescription>
</CardHeader>
<CardContent className="flex-grow z-20">
<div className="w-full h-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md overflow-auto z-20">
<div className="w-full h-full z-20" />
</div>
</CardContent>
<CardFooter className="flex justify-end gap-4 p-4 z-20">
<Button className="bg-green-500 text-white z-20">Download</Button>
<Button className="bg-blue-500 text-white z-20">Print</Button>
<Button className="bg-red-500 text-white z-20">Delete</Button>
</CardFooter>
</Card>
</div>
</div>
</div>
</div>
)
}
export default SelectForInterviewPage