a month ago
I have uploaded a UI image. Please convert this image into a React UI using: - UntitledUI design system - Tailwind CSS utility classes - Accessible, semantic HTML (React Aria friendly) Layout & Components: 1. Program Type - A select dropdown (UntitledUI Select) - Options: Camps, Private, League, Other - Show selected value clearly 2. Program Name - Text input field (UntitledUI Input) - Placeholder: "Enter program name" 3. Default Question Set - Searchable select dropdown - Allows typing to filter options - Uses UntitledUI combobox/select pattern 4. Default Promotion - Searchable select dropdown - Same behavior as Default Question Set Validation & Error States: - Show error messages below each field when invalid - Error text color: red / destructive state - Error border on input/select (UntitledUI error style) - Example errors: - "Program type is required" - "Program name cannot be empty" - "Please select a default question set" - "Please select a default promotion" Styling Requirements: - Use Tailwind CSS classes only (no inline styles) - Match UntitledUI spacing, typography, radius, and shadows - Use consistent form spacing and labels - Mobile-first responsive layout - Inputs and selects should have hover, focus, and error states Output Requirements: - React JSX code - Tailwind CSS classes - Clear component structure - Easy to integrate into an existing UntitledUI React project
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
