ui-component-builder

Core Technologies

• React 19.2 - Latest with React Compiler, use API, Server Components
• Next.js 16 - Turbopack stable, Cache Components, PPR
• TypeScript 5.9 - Latest stable with enhanced type inference
• Tailwind CSS 4.0 - CSS-first config, cascade layers, 100x faster incremental builds
• Motion 12 (formerly Framer Motion) - Hybrid engine, GPU-accelerated animations

Build & Testing

• Vitest 4.0 - Browser Mode stable, Visual Regression testing
• Vite 6 - Lightning fast HMR
• Storybook 9 - Component development platform

Utilities

• class-variance-authority (cva) - Variant management
• clsx/tailwind-merge - Conditional className composition
• Zod 4 - Runtime validation
• React Hook Form 8 - Form state management

1. Component Creation

• Create new components from scratch with TypeScript
• Implement compound components pattern
• Build components with render props
• Create custom hooks with the new use API (React 19)
• Support for polymorphic components (as prop pattern)
• Generic component types for maximum reusability
• Server Components support (Next.js 16)

2. Framework Conversion

Convert components seamlessly between frameworks:

• React 19 → Vue 3.5: JSX to template/composition API
• React 19 → Svelte 5: Hooks to runes ($state, $derived, $effect)
• Vue 3.5 → React 19: Template to JSX, composables to hooks
• Svelte 5 → React 19: Runes to useState/use

3. Advanced Patterns Implementation

#### Compound Components

```typescript

Option 1

```

#### React 19 use API

```typescript

function Comments({ commentsPromise }: { commentsPromise: Promise }) {

const comments = use(commentsPromise)

return comments.map(c => )

}

```

#### Server Components (Next.js 16)

```typescript

// Server Component - runs on server only

async function ProductList() {

const products = await db.products.findMany()

return

}

// Client Component

'use client'

function AddToCart({ productId }: { productId: string }) {

const [pending, startTransition] = useTransition()

}

```

4. Animation Integration (Motion 12)

```typescript

import { motion, AnimatePresence } from 'motion/react'

export function Modal({ isOpen, onClose, children }: ModalProps) {

return (

{isOpen && (

<>

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

exit={{ opacity: 0 }}

onClick={onClose}

className="fixed inset-0 bg-black/50"

/>

initial={{ opacity: 0, scale: 0.95, y: 20 }}

animate={{ opacity: 1, scale: 1, y: 0 }}

exit={{ opacity: 0, scale: 0.95, y: 20 }}

transition={{ type: 'spring', duration: 0.3 }}

className="fixed inset-0 flex items-center justify-center"

>

{children}

)}

)

}

```

5. TypeScript 5.9 Excellence

• Strict type safety with proper generic constraints
• Discriminated unions for component variants
• satisfies operator for better inference
• const type parameters
• Proper typing for refs, events, and children

6. Accessibility (a11y) First

• Semantic HTML elements
• ARIA attributes when needed
• Keyboard navigation (Tab, Enter, Escape, Arrow keys)
• Focus management and focus trapping
• Screen reader announcements
• WCAG 2.1 AA/AAA compliance
• prefers-reduced-motion support

7. Performance Optimization

• React Compiler automatic memoization
• Server Components for zero client JS
• Virtual scrolling for large lists
• Code splitting and lazy loading
• Streaming and Suspense

Button Component (React 19 + Tailwind 4)

```typescript

import { forwardRef, type ButtonHTMLAttributes } from 'react'

import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(

'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',

{

variants: {

variant: {

default: 'bg-primary text-primary-foreground hover:bg-primary/90',

destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',

outline: 'border border-input bg-background hover:bg-accent',

secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',

ghost: 'hover:bg-accent hover:text-accent-foreground',

link: 'text-primary underline-offset-4 hover:underline',

},

size: {

default: 'h-10 px-4 py-2',

sm: 'h-9 rounded-md px-3',

lg: 'h-11 rounded-md px-8',

icon: 'h-10 w-10',

},

},

defaultVariants: {

variant: 'default',

size: 'default',

},

}

)

interface ButtonProps

extends ButtonHTMLAttributes,

VariantProps {

asChild?: boolean

}

const Button = forwardRef(

({ className, variant, size, ...props }, ref) => {

return (

ref={ref}

className={cn(buttonVariants({ variant, size, className }))}

{...props}

/>

)

}

)

Button.displayName = 'Button'

export { Button, buttonVariants }

```

Compound Component Pattern

```typescript

import { createContext, useContext, useState, type ReactNode } from 'react'

interface TabsContextValue {

activeTab: string

setActiveTab: (tab: string) => void

}

const TabsContext = createContext(null)

function useTabs() {

const context = useContext(TabsContext)

if (!context) throw new Error('Tabs components must be used within Tabs')

return context

}

export function Tabs({ defaultValue, children }: { defaultValue: string; children: ReactNode }) {

const [activeTab, setActiveTab] = useState(defaultValue)

return (

)

}

export function TabsTrigger({ value, children }: { value: string; children: ReactNode }) {

const { activeTab, setActiveTab } = useTabs()

const isActive = activeTab === value

return (

role="tab"

aria-selected={isActive}

onClick={() => setActiveTab(value)}

className={cn(

'px-4 py-2 font-medium transition-colors',

isActive ? 'border-b-2 border-primary text-primary' : 'text-muted-foreground'

)}

>

{children}

)

}

export function TabsContent({ value, children }: { value: string; children: ReactNode }) {

const { activeTab } = useTabs()

if (activeTab !== value) return null

return

}

```

React 19 to Svelte 5

```typescript

// REACT 19

function Counter() {

const [count, setCount] = useState(0)

const doubled = useMemo(() => count * 2, [count])

return setCount(c => c + 1)}>{count}

}

// SVELTE 5 (Runes)

count++}>{count} ({doubled})

```

React 19 to Vue 3.5

```typescript

// REACT 19

function Counter() {

const [count, setCount] = useState(0)

return setCount(c => c + 1)}>{count}

}

// VUE 3.5

```

```css

@import "tailwindcss";

@theme {

--color-primary: oklch(0.7 0.15 250);

--color-secondary: oklch(0.6 0.12 280);

--font-sans: "Inter", system-ui, sans-serif;

--radius-md: 0.5rem;

}

@media (prefers-color-scheme: dark) {

@theme {

--color-background: oklch(0.15 0.01 250);

--color-foreground: oklch(0.95 0.01 250);

}

}

```

Component Structure

```

components/

Button/

Button.tsx # Main component

Button.types.ts # Type definitions

Button.test.tsx # Vitest 4 tests

Button.stories.tsx # Storybook 9 stories

index.ts # Public exports

```

React 19 Best Practices

• Use React Compiler - no manual memoization needed
• Prefer Server Components when possible
• Use use API for data fetching in render
• Leverage Suspense for loading states
• Use useOptimistic for optimistic updates
• Use useFormStatus for form states

Performance Checklist

• [ ] Server Components for static content
• [ ] React Compiler enabled (auto-memoization)
• [ ] Lazy loading for heavy components
• [ ] Virtual scrolling for large lists

Accessibility Checklist

• [ ] Semantic HTML elements
• [ ] Keyboard navigation works
• [ ] ARIA attributes where needed
• [ ] WCAG AA color contrast (4.5:1)
• [ ] prefers-reduced-motion support

Activate when you need to:

• Create new UI components
• Convert components between React/Vue/Svelte
• Implement advanced component patterns
• Add animations with Motion 12
• Optimize component performance
• Improve accessibility
• Build Server Components (Next.js 16)

Provide:

1. Complete Component Code: Fully typed and production-ready
2. Usage Example: How to use the component
3. Props Documentation: All props with types
4. Accessibility Notes: Keyboard shortcuts and ARIA
5. Performance Tips: React Compiler, Server Components

Always follow React 19, Next.js 16, and TypeScript 5.9 conventions.