Interface interaction

:root {
  --primary: oklch(0.7 0.15 200);
  --background: oklch(0.09 0 0);
  --foreground: oklch(0.98 0 0);
  --border: oklch(0.25 0 0);
  /* ... more color variables */
}

// app/layout.tsx
import { ThemeProvider } from '@/components/theme-provider'

export default function RootLayout({ children }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  )
}

.dark {
  --background: oklch(0.09 0 0);
  --foreground: oklch(0.98 0 0);
  /* All color variables in dark mode */
}

// Complete form component example
'use client'

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form'

const formSchema = z.object({
  username: z.string().min(2, 'Username must be at least 2 characters'),
  email: z.string().email('Invalid email address'),
})

export function UserForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: '',
      email: '',
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}

// Use tabIndex to control Tab order
<button tabIndex={1}>First</button>
<button tabIndex={2}>Second</button>

// Skip non-interactive elements
<div tabIndex={-1}>Skip this element</div>

// Remove from the Tab order (not recommended unless necessary)
<button tabIndex={-1}>Cannot be accessed via Tab</button>

// Focus Trap - used in modals
import { FocusTrap } from '@radix-ui/react-focus-trap'

<FocusTrap>
  <Dialog>
    {/* Focus is constrained within the dialog */}
  </Dialog>
</FocusTrap>

// Focus-visible styles
<button className="focus-visible:ring-2 focus-visible:ring-primary">
  {/* Show focus ring during keyboard navigation */}
</button>

// aria-label: provides a label for an element
<button aria-label="Close dialog">
  <X />
</button>

// aria-labelledby: references the ID of another element
<div aria-labelledby="dialog-title">
  <h2 id="dialog-title">Dialog title</h2>
</div>

// aria-describedby: provides additional description
<input 
  aria-describedby="email-help"
  aria-invalid={hasError}
/>
<span id="email-help">Please enter a valid email address</span>

// Use semantic tags
<nav>Navigation</nav>
<main>Main content</main>
<article>Article</article>
<section>Section</section>
<aside>Sidebar</aside>
<header>Header</header>
<footer>Footer</footer>

// Avoid: using div instead of semantic tags
<div className="nav"> {/* Not recommended */}
<nav> {/* Recommended */}

// Use the role attribute (when semantic tags are unavailable)
<div role="button" tabIndex={0} onClick={handleClick}>
  Custom button
</div>

<div role="alert" aria-live="polite">
  Important notice
</div>

<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  {/* Modal dialog */}
</div>

// Error: use color only to indicate status
<span className="text-red-500">Error</span>

// Correct: color + icon/text
<span className="text-red-500 flex items-center gap-1">
  <AlertCircle />
  Error: Please enter a valid value
</span>

// Use memo to avoid unnecessary re-renders
const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{/* complex rendering */}</div>
})

// Use useMemo to cache computed results
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b)
}, [a, b])

// Use useCallback to cache functions
const handleClick = useCallback(() => {
  doSomething(id)
}, [id])

// Use react-window or react-virtualized
import { FixedSizeList } from 'react-window'

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={50}
  width="100%"
>
  {Row}
</FixedSizeList>

// Dynamically import component
import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false, // If you need to disable SSR
})

// Route-level code splitting (handled automatically by Next.js)
// app/dashboard/page.tsx will be split automatically

// Automatic optimization by the Next.js Image component
import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // above-the-fold image
  loading="lazy" // below-the-fold image
  placeholder="blur" // blurred placeholder
/>

// Supports modern formats such as WebP and AVIF
// Automatically generates responsive images

// Use next/font to optimize fonts
import { GeistSans } from 'next/font/google'

const geistSans = GeistSans({
  subsets: ['latin'],
  display: 'swap', // Font loading strategy
  preload: true,
})

// Font subsetting, load only the required characters

// Preconnect third-party domains
<link rel="preconnect" href="https://fonts.googleapis.com" />

// Preload critical resources
<link rel="preload" href="/fonts/geist.woff2" as="font" />

// Prefetch next-page resources
<link rel="prefetch" href="/dashboard" />